html5视频自动播放需满足静音、用户交互等严格条件：必须显式设置muted和playsinline，ios要求首次交互后才能取消静音，且play()需捕获错误并提供ui回退。
HTML5 视频自动播放不是“写了 autoplay 就能播”，而是受浏览器策略严格约束的合规行为。能否播、是否带声、是否立即启动，取决于静音状态、用户交互、设备类型和页面上下文。不满足条件时，play() 会直接抛出 NotAllowedError，而非静默失败。
必须静音才能自动播放
所有主流浏览器（Chrome、Firefox、Safari、Edge）均要求：有声视频在无用户交互时一律禁止自动播放。唯一被广泛允许的自动播放路径是静音 + autoplay组合。
-
muted 属性不可省略：仅写
<video autoplay src="x.mp4"></video>几乎必然失效；必须显式添加muted（可简写为muted或muted=""） - 静音检测很严格：若视频文件实际含音频轨道但未真正静音（如编码残留音轨），部分浏览器（尤其是 Safari）可能拒绝播放
- JavaScript 动态创建 video 元素时，
video.muted = true必须在play()前设置，且不能依赖后续 JS 补救
移动端与 iOS 特别限制
iOS Safari 是最严格的环境，其限制直接影响 H5 页面和微信 WebView 等嵌入场景。
- 必须加 playsinline：否则视频会强制跳转原生全屏播放器，自动流程立即中断
- 首次访问页面时，即使 muted+autoplay+playsinline 齐备，iOS 仍可能延迟播放或要求最小交互（如轻微滚动）
- 安卓 WebView 行为不统一：部分厂商定制内核（如旧版 UC、QQ 浏览器）对
muted支持不完整，建议 fallback 到按钮触发
有声播放必须由用户触发
业务需要语音讲解、引导音效等场景，不能绕过交互要求，只能分两步实现：
- 页面加载后自动静音播放（
autoplay muted） - 监听首次有效交互（
click、touchstart、keydown），在事件回调中同步执行：video.muted = false;video.play().catch(e => console.warn("unmute failed", e)); - iOS 要求
muted = false和play()必须在同一个事件处理函数内调用，跨异步（如 setTimeout、Promise.then）会失败
可靠播放的工程实践
光靠 HTML 属性不够，需结合事件监听与错误捕获构建健壮逻辑：
- 监听
canplaythrough而非loadeddata：前者表示缓冲充足、可连续播放，调用play()更稳妥 -
play()总是返回 Promise，必须.catch()处理拒绝，避免阻塞后续脚本或控制台报错 - 提供 UI 回退：自动播放失败时，显示“点击播放”按钮或播放图标，引导用户手动触发
- 格式优先 MP4（H.264+AAC），并用
<source></source>提供 WebM 回退，避免因解码失败导致 autoplay 彻底失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
