现代浏览器默认禁止有声视频自动播放，必须同时添加 muted 属性才能使 autoplay 大概率生效；safari 和移动端更严格，要求用户交互后才允许取消静音并播放。
autoplay 属性加了但没用？先看浏览器策略
现代浏览器（chrome、firefox、Safari）默认禁止有声音的视频自动播放，这是硬性限制，不是代码写错了。哪怕写了 autoplay，只要视频没静音，多数情况下会被静默拦截。
- 必须同时加上
muted属性，autoplay才大概率生效 - Safari 对
autoplay更严格：即使muted，也可能要求用户与页面有交互后才允许后续播放 - 移动端（尤其 ios）几乎只认
muted+autoplay组合，且不支持 js 调用play()无用户手势触发
html 写法要带 muted，不能只靠 JS 补救
很多人以为用 JS 调 play() 就能绕过限制，其实不行——没有用户手势（如 click、touchstart），play() 会直接抛出 NotAllowedError 异常。
- 正确写法：
<video autoplay muted src="demo.mp4"></video> - 错误写法：
<video autoplay src="demo.mp4"></video>（大概率静音或卡住） - 别指望 JS 在页面加载后立刻调
video.play()，99% 失败，除非之前已有用户点击行为
想自动播又有声音？得等用户交互
如果业务确实需要带声自动播放（比如引导页语音讲解），唯一合规路径是：先静音自动播，等用户点击/触摸后，再取消静音并继续播放。
- 监听
click或touchstart，然后执行video.muted = false，再调一次play() - 注意：iOS Safari 中，
muted = false后必须在同一个事件回调里调play()，否则仍被拒 - 示例关键逻辑：
button.addEventListener('click', () => { video.muted = false; video.play().catch(e => console.log('still blocked:', e)); });
兼容性细节和容易忽略的坑
autoplay 不是布尔开关，它在不同环境表现差异很大，很多问题出在“以为设了就稳了”。
立即学习“前端免费学习笔记（深入）”；
- 某些安卓 webview（尤其旧版）对
muted支持不一致，建议加playsinline防止全屏跳转 -
preload="auto"不能替代autoplay，它只影响预加载策略，不触发播放 - 使用
canplaythrough事件监听比loadeddata更可靠，前者表示足够数据可连续播放 - 如果视频格式不被支持（如 Safari 不支持 WebM），
autoplay直接失效，且控制台可能无提示
实际项目里最常卡住的地方，是开发者在本地开发时用 Chrome 测试正常，一上生产环境（尤其是嵌入微信 WebView 或企业内嵌浏览器）就失效——那些环境往往有更激进的媒体策略，连 muted 都不一定买账。