现代浏览器禁止有声视频自动播放是策略而非bug，Chrome≥66、Safari≥11、Edge≥79默认拦截未静音的autoplay；唯一可靠方案是同时声明autoplay和muted属性（muted须为HTML属性），并添加playsinline与webkit-playsinline以确保内联播放；有声播放必须等待用户首次有效交互后手动取消静音并调用play()。
Chrome 和 Safari 禁止 autoplay 的真实原因
不是 bug，是策略：现代浏览器（Chrome ≥66、Safari ≥11、Edge ≥79）默认禁止带声音的视频自动播放，目的是减少干扰、节省流量、防止恶意广告。只要 video 元素没加 muted，哪怕写了 autoplay，也会被静默忽略。
autoplay + muted 是唯一可靠组合
必须同时满足两个条件才能触发自动播放：显式声明 autoplay 且强制静音。仅加 muted 不够，仅加 autoplay 也不够。
-
muted必须是 HTML 属性（而非 JS 动态设置），否则部分 Safari 版本仍会拒绝 -
autoplay推荐也写成 HTML 属性，避免 JS 执行时机问题 - 如果后续需要恢复声音，可在用户交互后用 JS 调用
video.muted = false，再调play()
playsinline 和 webkit-playsinline 别漏掉
iOS Safari 默认全屏播放视频，不加 playsinline 会导致页面跳转、布局断裂。Android Chrome 也需要它来保持内联行为。
-
playsinline是标准属性，必须写 -
webkit-playsinline是旧版 iOS 兼容写法，建议保留（尤其支持 iOS 10–12） - 二者都需写在
标签上，不能靠 CSS 或 JS 补救
用户首次交互后才允许有声播放
如果业务强依赖有声自动播放（如引导语音、教学视频），只能等用户完成一次有效交互（点击、触摸、keydown）后再触发。此时可安全移除静音并调用 play()。
立即学习“前端免费学习笔记（深入）”；
- 监听
click或touchstart事件（注意 iOS Safari 对touchstart的限制） - 避免在
scroll或mousemove中触发，这些不算“用户激活”（user activation） - 调用
play()必须是用户事件回调的直接同步执行，不能包裹在setTimeout或 Promise.then 里
button.addEventListener('click', () => {
video.muted = false;
video.play().catch(e => console.log('play failed:', e));
});
有些开发者试图用 volume = 0.001 绕过静音检查，但 Chrome 已明确将该行为视为等效于 muted；也有尝试伪造用户手势的方案，在新版浏览器中基本失效。真正可控的路径只有两条：接受静音自动播，或等用户点一下再开声。 
