autoplay 必须与 muted 同时作为 html 属性存在才有效，仅写 autoplay 会导致视频卡在第一帧；muted 是无值布尔属性，运行时设置无效，且 volume=0 不能替代 muted。
autoplay 必须和 muted 同时作为 HTML 属性才有效
只写 autoplay，视频大概率卡在第一帧不动，控制台不报错但行为静默——这不是 bug，是浏览器策略强制拦截。Chrome、Safari、Edge 从 2017 年起就把“有声自动播放”视为干扰，默认拒绝。而 muted 是向浏览器明确声明“这个视频初始不发声”，从而获得自动播放许可的唯一通行证。
常见错误写法包括：<video autoplay></video>（缺 muted）、<video autoplay muted="true"></video>（布尔属性不该带值）、<video autoplay muted="false"></video>（反而被识别为已静音但用户意图相反，触发拒绝）。
正确写法只有一种：<video autoplay muted src="demo.mp4"></video> —— muted 是无值布尔属性，存在即生效。
JS 动态设置 video.muted = true 基本无效
很多开发者在 DOMContentLoaded 或 mounted 钩子中执行 video.muted = true 再调 play()，结果失败。因为浏览器只在 HTML 解析阶段检查 muted 是否作为初始属性存在，运行时设置不恢复 autoplay 资格。
动态创建 video 元素时，必须在插入 DOM 前就配置好属性：
const v = document.createElement('video')v.autoplay = truev.muted = true-
v.playsInline = true（注意大小写，不是playsinline） document.body.appendChild(v)
顺序不能颠倒：先设属性，再 append，最后调 play()；等 loadedmetadata 或 canplay 再设 muted 就太晚了。
iOS Safari 上 muted 失效的三个硬性条件
即使写了 autoplay muted，iOS Safari 仍可能拒绝播放或强制全屏，原因很具体：
-
playsinline缺失：HTML 标签里必须显式写playsinline，对应 JS 属性是video.playsInline = true - 视频不在可视区域：元素被
opacity: 0、transform: scale(0.99)或visibility: hidden遮盖，部分 iOS 版本会回退静音策略 - 响应头问题：服务器未返回
Accept-Ranges: bytes（导致无法分片加载），或跨域视频缺少Access-Control-Allow-Origin: *
这些都不会抛 JS 错误，只会表现为“加载完没反应”。排查优先看 Network 面板里视频请求的状态码和响应头。
volume = 0 不能替代 muted
video.volume = 0 是调低音量，video.muted = true 是声明接受静音——浏览器自动播放策略只认后者。很多情况下 volume = 0 依然被拦截，而 muted 是唯一被广泛豁免的路径。
两者可以共存，但 muted 优先级更高：设 muted = true 后 volume 值被忽略；设 muted = false 后 volume 才重新生效。
真正容易被忽略的是：muted 的核心价值不是静音，而是“策略通行证”——哪怕你后续立刻 video.muted = false，也得先靠它把 play() 跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
