autoplay无反应是浏览器主动跳过而非代码错误，需同时满足muted+autoplay+playsinline三属性且用户已交互；ios还需避免父容器display:none，微信h5则须改用点击触发。
autoplay属性为什么根本没反应
不是代码写错了，是浏览器压根没执行它。Chrome 66+、Safari 11+、Firefox、Edge 全部默认跳过 autoplay 属性的播放逻辑——只要视频带声音，或用户还没点过页面，就静默忽略。现象包括：video.paused 始终为 true、首帧卡住、readyState 停在 0 或 1、控制台干净得没有报错。
muted + autoplay + playsinline 是最低可行组合
这三个属性必须同时出现在 <video></video> 标签里，缺一不可：
-
muted：强制静音，是绕过策略的核心前提；不加它，Chrome/Safari 直接拒绝后续所有播放尝试 -
autoplay：虽已弱化为“提示”，但仍是触发静音自动播放的必要声明 -
playsinline：iOS Safari 必须项，否则即使静音也强制全屏弹出；旧版 iOS 还需额外加webkit-playsinline
示例写法：
<video src="demo.mp4" autoplay muted playsinline controls preload="metadata"></video>
用户点击后开声的正确时序
想在自动静音播起来后让用户点一下就恢复声音，不能直接 video.muted = false —— Safari 17+ 会中断正在播放的视频。必须分两步且严格同步：
- 在 click/touchstart 回调中，先调一次
video.play()（哪怕它已在播，这是 Safari 激活音频通道的硬性要求） - 再立即设
video.muted = false，两者必须在同一个事件处理函数内完成 - 务必
.catch(e => console.warn("开声失败", e))，因为部分设备禁用媒体权限时会 reject - 避免用
setTimeout或Promise.then包裹第二步，延迟哪怕 1ms 都可能失效
移动端微信 WebView 是个例外黑洞
iOS 微信内置浏览器几乎完全无视 autoplay 和 muted，连静音自动播都大概率失败；Android 微信表现略好但也不稳定。别赌 UA 检测能全覆盖，最稳妥的做法是：
- UA 判断是否为微信（
navigator.userAgent.includes("MicroMessenger")） - 是微信则直接隐藏自动播放逻辑，只渲染一个大按钮：
<button id="playBtn">点我播放</button> - 点击后才创建
<video></video>元素并调用play()，绕过预加载阶段的策略拦截
真正容易被忽略的点是：iOS Safari 下，如果 <video></video> 父容器初始为 display: none 或 visibility: hidden，哪怕属性全对，也会因未进入可播放状态而卡死——确保它至少是 opacity: 0 或 position: absolute; left: -9999px 这类“视觉隐藏但 DOM 可见”的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
