video自动播放失败主因是浏览器策略限制有声自动播放，必须同时设置HTML属性autoplay和muted，iOS还需playsinline，且需用户交互后才能取消静音。
video 标签自动播放失败的常见原因
绝大多数情况下，autoplay 不生效，不是因为你写错了，而是浏览器策略在起作用：现代浏览器（Chrome、Edge、Safari、Firefox）默认禁止有声音的自动播放，除非满足“用户已与页面交互过”或“媒体已静音”。autoplay 属性本身只是个提示，不是强制指令。
常见错误现象包括：video 元素黑屏、控制栏不出现、控制台无报错但毫无反应；有时甚至 play() 方法调用也会被拒绝并抛出 NotAllowedError。
- 必须同时设置
muted属性（不是仅靠 JS 静音） -
autoplay和muted都得是 HTML 属性（即写在标签里），不能只靠 JS 后续设置 - 某些安卓 WebView 或 iOS Safari 对
playsinline也有要求，否则会强跳全屏
正确写法：HTML 层面必须带 muted 和 autoplay
最简可靠写法就是把两个属性都写死在标签上，且顺序无关，但缺一不可：
<video autoplay muted playsinline> <source src="demo.mp4" type="video/mp4"> </video>
注意：playsinline 不是必需，但在 iOS Safari 中缺失会导致视频点击后才播放、且强制全屏——加它才能内联播放。另外，muted 是布尔属性，写 muted="true" 或 muted="" 都行，但推荐直接写 muted，更符合规范。
立即学习“前端免费学习笔记（深入）”；
- 不要只写
autoplay，也不要用 JS 在DOMContentLoaded里调play()—— 多数情况会被拒 - 如果用 JS 动态插入
video，务必在insertBefore或appendChild前就设好autoplay和muted属性（用setAttribute），而不是插入后再设 - 服务端返回的视频响应头需包含
Content-Type: video/mp4，否则部分浏览器可能拒绝解码
JS 控制播放时仍要遵守静音前提
哪怕你用按钮触发播放，比如 document.querySelector('video').play()，只要视频没提前静音，依然可能失败。尤其当用户从未与页面交互（如刚打开链接就执行），Chrome 会直接拒绝。
安全做法是：确保 video 元素始终带 muted 属性，再在用户点击后取消静音（如果需要）：
const v = document.querySelector('video');
v.muted = false; // 用户点击后才开声
v.play().catch(e => console.warn('play failed:', e));
注意：v.muted = false 不会自动解除浏览器的播放限制——它只影响音量，不恢复播放权限。所以“先静音自动播，再交互后开声”是唯一稳妥路径。
- 不要依赖
canplay或loadeddata事件去调play()，这些时机仍早于用户手势 -
play()返回 Promise，必须catch错误，否则静默失败很难排查 - iOS Safari 中，即使
muted已设，若未加playsinline，play()也可能成功但画面不渲染
兼容性与移动端特殊处理
Android Chrome 通常对 autoplay muted 支持较好，但部分定制 ROM 浏览器（如华为/小米自带浏览器）会额外拦截；iOS Safari 则最严格：必须同时满足 autoplay、muted、playsinline，且不能有 controls 属性（某些版本下冲突）。
一个容易被忽略的点：视频编码格式。H.264 + AAC 是最广泛支持的组合；用 VP9 或 AV1 编码的 MP4，在 Safari 上可能直接无法加载，导致 autoplay 彻底失效。
- 测试时务必真机验证，模拟器或桌面 Chrome 的 Device Mode 不完全等价
- 避免在
video标签上写loop+autoplay而不加muted——这在几乎所有环境下都会失败 - 如果视频源是跨域的，记得服务端配好
Access-Control-Allow-Origin，否则 iOS 可能静音也播不了
muted，再设计合理的用户触发动线。 
