autoplay必须配合muted才能生效，现代浏览器默认禁止有声自动播放；未加muted时视频大概率静音暂停，JS调用play()也需用户交互后才可靠，iOS更要求手势直接触发。
autoplay 属性必须配合 muted 才能生效
现代浏览器（Chrome、Firefox、Safari）默认禁止有声音的自动播放，autoplay 单独写上不会起作用，页面加载后视频大概率静音卡在首帧。真正触发自动播放的关键是加 muted —— 这不是可选项，是硬性要求。
-
<video autoplay muted src="demo.mp4"></video>✅ 可自动播放 -
<video autoplay src="demo.mp4"></video>❌ 大概率静音暂停，控制台可能报DOMException: The play() request was interrupted - 即使后续用 JS 调用
play()，若未提前设muted或用户未与页面交互过，也会被拒绝
如何用 JavaScript 补救没加 muted 的 autoplay
如果无法修改 HTML（比如 CMS 输出固定标签），可用 JS 动态补上 muted 再调用 play()，但必须在用户首次交互（如 click、scroll）之后才可靠。单纯 onload 里执行大概率失败。
- 推荐时机：监听
document.addEventListener('click', ...)或document.addEventListener('touchstart', ...)后立即执行 - 示例：
<video id="myVideo" autoplay src="demo.mp4"></video> <script> document.addEventListener('click', () => { const v = document.getElementById('myVideo'); v.muted = true; v.play().catch(e => console.warn('play failed:', e)); }); </script> - 注意：iOS Safari 对
play()的调用限制更严，必须是用户手势直接触发的回调内执行，不能套 setTimeout 或 promise.then
autoplay 在不同平台的实际表现差异
移动端和桌面端策略不一致，尤其 iOS 和 Android WebView 行为常被忽略：
- iOS Safari：必须同时满足
autoplay+muted+playsinline（否则强制全屏），且页面需是 HTTPS - Android Chrome：
muted基本够用，但部分定制 ROM（如华为、小米）WebView 可能额外拦截play() - 微信内置浏览器（X5 内核）：对
autoplay支持极差，即使muted也可能不播，建议改用用户点击后播放 - 桌面 Firefox：允许带音量 autoplay，但仅限用户明确设置过“允许自动播放”（about:config →
media.autoplay.enabled）
替代方案：用 poster + 用户触发播放更稳妥
如果业务不强依赖“一打开就动”，其实用 poster 图 + 显式播放按钮更省心，兼容性零问题，还能避免移动端因自动播放被系统降频或后台暂停。
立即学习“前端免费学习笔记（深入）”；
<video poster="cover.jpg" controls><source src="demo.mp4"></video>- 想“伪自动”：CSS 隐藏原生控件，用自定义按钮覆盖 poster，点击时
v.play()，此时已有用户手势，muted都非必需 - 特别注意：某些广告监测或数据分析场景要求“无交互播放”，那必须走 muted 路线，并做好 fallback（比如检测
paused状态，提示用户点击）
autoplay 不是开关，而是一连串权限协商过程。最容易被忽略的是：**没有用户手势上下文时，任何 JS play() 调用都可能静默失败，且错误不抛异常，只返回 Promise reject —— 得主动 catch 才知道它没播成。** 
