autoplay属性仅适用于video和audio标签，现代浏览器默认禁止有声媒体自动播放，需同时设置muted才可能生效，iOS还需playsinline，有声播放必须依赖用户首次交互后调用play()。

autoplay 属性只适用于 和 标签，不能用在 、 或自定义组件上。

为什么加了 autoplay 却不自动播放

现代浏览器（Chrome、Edge、Firefox、Safari）默认禁止有声音的媒体自动播放，这是出于用户体验和带宽控制考虑。即使写了 autoplay，只要没同时加 muted，绝大多数情况下会被静音拦截或直接阻止。

• Chrome 66+ 要求视频必须满足 muted + autoplay 才能真正启动
• Safari 对 audio 标签更严格：即使 muted， 仍可能被禁播（尤其无用户交互触发时）
• 移动端 iOS Safari 几乎完全禁用 autoplay，无论是否 muted
• 部分 Android WebView（如微信内置浏览器）也忽略 autoplay

正确写法与兼容性要点

最稳妥的写法是同时声明 autoplay 和 muted，并确保视频资源可加载：

<video autoplay muted loop playsinline><source src="video.mp4" type="video/mp4"></source></video>

• playsinline 是 iOS 必备属性，否则视频会强制全屏播放
• loop 可避免播放结束后的空白状态，提升“自动感”
• 不要写 autoplay="autoplay" —— HTML5 中它是布尔属性，写成 autoplay 即可
• 避免与 preload="none" 同时使用，否则可能因资源未加载导致 autoplay 失效

需要声音时怎么办

如果业务必须带声自动播放（比如广告、引导语音），唯一可靠路径是：等用户首次交互（click/touchstart）后再调用 play() 方法。

• 不能在页面 load 时直接 video.play()，会报 DOMException: play() failed because the user didn't interact with the document first
• 推荐监听 document.addEventListener('click', handler, { once: true })，然后在 handler 中调用 video.play()
• 注意：该交互必须发生在当前 tab，且不能是 iframe 内部触发（跨域 iframe 无效）

实际项目里，autoplay 不是开关，而是一组条件组合的结果：用户行为、媒体属性、浏览器策略、设备类型缺一不可。最容易被忽略的是 iOS 的 playsinline 和首次交互时机——漏掉任一个，就等于没写 autoplay。