video autoplay 在现代浏览器中基本不生效，因主流浏览器为防干扰、省流量、保续航而主动限制：有声视频100%被拦截，需 muted+playsinline+preload="metadata"等组合且真机多端测试。
video 标签的 autoplay 属性在现代浏览器中基本不生效，除非同时满足静音、用户交互、设备兼容等一连串条件；单独写 autoplay 几乎等于没写。
为什么写了 autoplay 还是不播？
这不是 bug，是 Chrome、Safari、Firefox、Edge 等主流浏览器主动实施的策略限制。核心逻辑就一条：防止未授权的声音打扰用户、节省流量、延长电池寿命。具体表现为：
- 有声视频（即未设
muted）几乎 100% 被拦截，play()会直接抛出NotAllowedError: play() failed because the user didn't interact with the document first - 即使加了
muted，iOS Safari 仍可能静默失败（不报错但也不动），尤其在首次加载或视频编码不兼容时 - 移动端 WebView（如微信 X5 内核）会进一步加严，HTML 层面无法绕过，必须依赖原生配置
setMediaPlaybackRequiresUserGesture(false) - Chrome 从 70 版本起引入“媒体参与指数（MEI）”，只有用户高频播放过的站点才可能获得有声自动播放权限
autoplay 和 muted 必须成对出现，但还不够
只写 <video autoplay muted> 是起点，不是终点。实际生效还需补充关键属性：
-
playsinline：iOS 必加，否则视频强制全屏，破坏页面布局 -
preload="metadata"：避免因资源未加载导致autoplay无响应；不要用preload="none" -
loop：防止播放结束变黑屏，维持“自动感” - 确保视频编码为 H.264 Baseline Profile（尤其 iOS），MP4 容器 + AAC 音频最稳妥
错误写法：<video autoplay="autoplay" muted preload="none"> —— autoplay 是布尔属性，autoplay="autoplay" 多余；preload="none" 与自动播放目标冲突。
立即学习“前端免费学习笔记（深入）”；
有声播放唯一可靠路径：用户点击后调用 play()
如果业务必须带声音（比如广告引导、产品语音介绍），不能依赖 HTML 属性，只能走 JS 手动触发。但有硬性前提：
- 必须绑定在同步用户手势事件上：
click、touchstart、pointerdown，不能是setTimeout、Promise.then或scroll回调 - 事件监听需设
{ once: true }，避免重复调用引发异常 - 调用
play()后必须.catch()捕获拒绝，否则 Promise rejection 会污染控制台 - 检查
video.readyState >= 2和!video.paused，比单纯看是否报错更准——有些浏览器静默失败
示例：document.addEventListener('click', () => video.play().catch(e => console.warn('Autoplay prevented:', e)), { once: true });
iOS 和 Android WebView 是重灾区，别心存侥幸
最容易被忽略的两个点，恰恰是失效主因：
- iOS 上漏掉
playsinline，哪怕muted+autoplay全齐，也会跳全屏再卡住 - 微信 Android 内置浏览器（X5 内核）默认拦截所有
play()，即使有用户点击，也需服务端配合加x5-video-player-type="h5"和x5-video-player-fullscreen="false"属性 - 部分安卓厂商 WebView（如华为、小米）会额外校验
document.hasFocus()，若页面未激活，play()也会被拒
真正上线前，必须真机测 iOS Safari、微信、QQ 浏览器、Chrome for Android 四个环境，模拟弱网和首次访问场景——策略细节随系统版本更新频繁变动，文档写的“支持”不等于你这次能跑通。
