现代浏览器自动播放需同时设置autoplay和无值muted属性，js动态设置muted无效；ios safari还需playsinline、可视区域可见及正确响应头。
video autoplay 失败，八成是没写对 muted
现代浏览器（Chrome、Safari、Firefox、Edge）已将有声自动播放视为干扰行为，默认拦截。真正起作用的不是“加了 autoplay”，而是 autoplay 和 muted 必须同时作为 HTML 属性存在，且 muted 必须是无值布尔属性——即只写 muted，不能写 muted="true" 或 muted="false"。
常见错误现象：
- 控制台没报错，但视频黑屏不动
- 本地开发正常，上线后突然失效
- Vue/React 中用
:muted="true"渲染出带值属性，静音不生效
正确写法示例：
<video autoplay muted playsinline src="bg.mp4"></video>错误写法包括：
<video autoplay muted="true"></video>、<video autoplay></video>、<video autoplay muted="false"></video>（后者反而被识别为已静音，触发策略拒绝）。
JS 动态设置 video.muted = true 为什么不管用
因为浏览器只在 HTML 解析阶段检查 muted 是否存在，以决定是否授予 autoplay 权限。JS 后设 video.muted = true 是运行时行为，不恢复 autoplay 资格。
使用场景：
- 动态创建
video元素（如通过document.createElement('video')） - 服务端渲染或框架中无法直接写死 HTML 属性
实操建议：
- 必须在调用
play()前设置video.muted = true，顺序不能颠倒 - 同时设
video.autoplay = true和video.playsInline = true（注意大小写，不是playsinline） - 不要等
loadedmetadata或canplay再设 —— 那已经太晚 - 插入 DOM 前就应完成属性配置，避免先 append 再 setAttribute
iOS Safari 上 muted 失效的三个硬性条件
即使写了 muted 和 autoplay，iOS Safari 仍可能拒绝播放或强制全屏，原因很具体：
-
playsinline缺失：HTML 标签里必须显式写上playsinline，对应 JS 属性是video.playsInline = true（首字母大写） - 视频不在可视区域内：元素被
transform: scale(0.99)或opacity: 0遮盖，部分 iOS 版本会回退静音策略 - 响应头问题：服务器未返回
Access-Control-Allow-Origin: *（跨域视频），或Content-Type错误（如返回text/plain而非video/mp4）
这些都不会抛 JS 错误，只会表现为“加载完没反应”。排查时优先检查网络面板里视频请求的响应头和状态码。
volume = 0 和 muted = true 的本质区别
volume = 0 是调低音量，muted = true 是声明“我接受静音”——浏览器只认后者作为 autoplay 的通行证。
关键事实：
-
video.volume = 0无法绕过 autoplay 限制，多数情况下仍被拦截 -
muted和volume可共存，但muted = true时volume值被忽略；设muted = false后，volume才重新生效 - 用户点击音量按钮开声，本质是
video.muted = false，此时无需再调play()—— 播放已开始，后续静音切换自由
最易被忽略的一点：muted 不是音量开关，而是播放资格的“签证”。哪怕你一播完立刻 muted = false，也得先靠它把 play() 跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
