HTML5音视频自动播放失效主因是浏览器策略拦截，需检查静音属性（muted必须写在标签内）、playsinline兼容性、元素可见性、用户交互时机（紧邻事件调用play）、资源格式（MP4优先）及服务端Accept-Ranges支持。
HTML5 音视频自动播放不生效，基本不是代码写错了，而是浏览器策略主动拦截。排查要从“能不能播”和“有没有被拦”两个层面入手，重点看静音状态、用户交互时机、属性写法和资源加载情况。
静音属性是否真正生效
有声媒体自动播放在所有主流浏览器中都被禁止，静音是硬性前提：
-
muted 必须作为 HTML 属性直接写在标签里，例如
<video autoplay muted>；仅靠 JS 设置video.muted = true多数 Safari 版本不认 - 部分旧版 Safari 要求
muted="muted"冗余写法，建议统一用布尔属性更稳妥 - 检查 DOM 中该元素的
muted属性是否为true（不是字符串 "muted"），可用console.log(video.muted)验证
关键属性是否完整且位置正确
移动端尤其敏感，缺一不可：
-
playsinline 和 webkit-playsinline 必须同时存在，且只能写在
<video>或<audio>标签内，CSS 或 JS 补救无效 - 视频初始不能被
display: none、visibility: hidden或opacity: 0隐藏，否则即使属性齐全也会失败 - 避免在异步回调（如
setTimeout、Promise.then）中调用play()，必须紧贴用户事件回调执行
用户交互是否真实触发并满足条件
想最终带声音播放，必须走“先静音自动播 → 再用户点一下开声”两步路径：
立即学习“前端免费学习笔记（深入）”；
- 监听
click或touchstart（iOS Safari 对touchend支持不稳定） - 在同一个事件回调中，**紧邻执行**
video.muted = false和video.play() - 调用前建议检查
video.readyState >= 2，避免因元数据未加载导致失败 - 务必捕获错误：
video.play().catch(e => console.warn("播放被拒", e))，用于识别策略拦截
资源本身与加载行为是否达标
即使策略全对，文件或加载方式不对也会卡住：
- 音频/视频格式优先选 H.264 + AAC 封装为 MP4，避免 H.265、AV1、VP9 等兼容性差的编码
-
preload推荐设为"metadata"，它只拉取时长、宽高、首帧位置等头信息，兼顾速度与流量 - 服务端需支持
Accept-Ranges: bytes响应头，否则 iOS Safari 可能无法正确 seek 或循环 - 用 Chrome DevTools 的 Network 面板过滤
media类型，确认实际加载字节数是否符合预期（比如 metadata 加载是否远小于完整文件）
