HTML5视频autoplay失效是浏览器统一策略所致，需同时设置muted属性、playsinline及webkit-playsinline，并通过用户交互解除静音；隐藏元素或异步调用将导致失败。
HTML5 视频加了 autoplay 却不播放，不是代码写错了，而是浏览器主动拦截了——这不是 bug，是统一策略。能否播、怎么播、何时能带声播，取决于静音状态、用户是否点过屏幕、设备类型，以及你有没有写对关键属性。
静音是自动播放的硬门槛
所有主流浏览器（Chrome ≥66、Safari ≥11、Firefox、Edge）都要求：有声视频禁止自动播放，静音视频才可能被放行。只写 autoplay 没用，必须同时声明 muted 作为 HTML 属性（不是 JS 动态设置）：
-
<video autoplay muted></video>✅ 可靠起点 -
<video autoplay></video>❌ 静默失败，控制台无报错，视频卡首帧 -
video.muted = true（JS 设置）⚠️ 多数 Safari 版本不认，无法触发 autoplay - 部分旧版 Safari 要求
muted="muted"冗余写法，建议统一用布尔属性更稳妥
移动端必须加 playsinline 和 webkit-playsinline
iOS Safari 默认强制全屏播放，不加内联属性会导致页面跳转、布局崩坏；Android Chrome 也依赖它保持内联行为：
-
playsinline是标准属性，必写 -
webkit-playsinline是 iOS 10–12 兼容必需项，建议与前者并存 - 二者必须直接写在
<video>标签里，CSS 或 JS 补救无效 - 若视频初始被
display: none或visibility: hidden隐藏，即使属性齐全也会失败
有声播放只能靠用户真实交互触发
想最终带声音播放？不能跳过静音阶段，而要分两步走：先静音自动播，再等用户点一下再开声。关键细节很严格：
立即学习“前端免费学习笔记（深入）”；
- 必须监听
click或touchstart（iOS Safari 对touchend支持不稳定） - 调用
video.muted = false和video.play()必须在同一个事件回调里紧邻执行 - 不能包裹在
setTimeout、Promise.then或异步加载完成钩子中 - 调用前建议检查
video.readyState >= 2，避免因未加载元数据而失败 - 务必捕获
.play().catch(e => console.warn("播放被拒", e))，用于降级提示
如何判断自动播放是否真成功
别只看控制台有没有报错——很多失败是静默的。可靠判断方式：
- 调用
play()后立即检查：!video.paused && video.readyState >= 2 - 监听
playing事件比监听play更准，它表示真正开始播放 - 若失败，及时显示“点击播放”按钮或轻量提示，别让用户干等
- 微信 Android（X5 内核）、QQ 浏览器等 WebView 更严，需额外配置或引导用户手动触发
