HTML5视频自动播放需满足静音、可见性及用户手势三条件：必须硬编码muted属性，禁止隐藏元素，有声播放须在用户点击后立即执行muted=false和play()。
HTML5 视频自动播放不生效，90% 不是代码写错了，而是浏览器策略没对齐。关键不是“怎么加 autoplay”，而是“怎么让 autoplay 被接受”。下面从最常踩的坑切入，直给排查路径。
静音属性必须硬编码在标签里
只写 <video autoplay></video> 一定失败；muted 必须作为 HTML 属性存在，且不能靠 JS 后续设置：
-
✅ 正确写法：
<video autoplay muted playsinline webkit-playsinline src="a.mp4"></video> -
❌ 常见错误：用 JS 动态设
video.muted = true再调play()—— Safari 多数版本直接无视 -
⚠️ 兼容提示：iOS 10–12 需要
webkit-playsinline，建议和playsinline并存；二者缺一不可，CSS 或 JS 补救无效
隐藏状态会直接废掉自动播放
哪怕所有属性都写对了，只要视频初始被隐藏，浏览器就拒绝启动播放：
-
禁止使用：
display: none、visibility: hidden、opacity: 0（即使父容器可见） -
可替代方案：用
position: absolute; left: -9999px或width: 0; height: 0; overflow: hidden隐藏视觉但保留布局有效性 -
验证方法：打开开发者工具，检查该
<video></video>元素是否在 DOM 中可见（computed 样式中display不为none，visibility为visible）
有声播放必须绑定真实用户手势
想最终开声音？不能跳过静音自动播这步，必须分两阶段，且触发逻辑极其严格：
立即学习“前端免费学习笔记（深入）”；
-
第一阶段：页面加载时静音自动播（靠
autoplay muted实现） -
第二阶段：等用户真实点击或触摸后，立刻执行两件事：
video.muted = false和video.play()，且必须在同一个事件回调内紧邻调用 -
禁止操作：不能包在
setTimeout、Promise.then、load回调里；iOS Safari 对touchend支持不稳定，优先用touchstart或click
播放结果必须主动验证，不能只看控制台
很多失败是静默的，控制台不报错，视频却卡在首帧：
-
可靠判断方式：调用
play()后立即检查!video.paused && video.readyState >= 2 -
更准监听：用
video.addEventListener('playing', handler)，比play事件更能确认真正开始渲染 -
必加兜底：对
play().catch(e => { /* 显示‘点击播放’按钮或轻量提示 */ })，尤其在微信 Android（X5 内核）等 WebView 中几乎必现拒绝
