HTML5视频自动播放必须满足静音前提、用户交互触发及正确属性组合：需同时设置autoplay、muted、playsinline和webkit-playsinline，且muted须为HTML布尔属性；有声播放须在用户点击后执行video.muted=false并立即调用play()。
HTML5 视频自动播放不是“写了 autoplay 就能播”，而是必须匹配浏览器的用户激活策略。核心原则就一条：静音是前提，交互是钥匙，属性是硬要求。
静音视频 + 正确属性组合是启动基础
所有主流浏览器（Chrome ≥66、Safari ≥11、Firefox、Edge）都强制要求——有声视频禁止自动播放，静音视频才可能被放行。仅写 autoplay 会静默失败，必须同时声明：
-
muted：作为 HTML 布尔属性直接写在标签里，如
<video autoplay muted>；JS 动态设置video.muted = true在多数 Safari 中无效 - playsinline：标准属性，移动端保持内联播放必需
- webkit-playsinline：iOS 10–12 兼容性兜底，建议与 playsinline 并存
- 避免视频初始被
display: none或visibility: hidden隐藏，否则即使属性齐全也失败
有声播放必须依赖真实用户交互
想最终带声音播放？不能跳过静音阶段，而要分两步走：
- 先用 muted + autoplay 自动启播（首帧快速呈现）
- 等用户点击或触摸后，立即在同一事件回调中执行：
video.muted = false和video.play() - 监听
touchstart（iOS Safari 对touchend支持不稳定），不推荐click在部分安卓 WebView 中延迟高 - 调用前检查
video.readyState >= 2，避免因元数据未加载导致失败
预加载与编码优化影响首帧体验
属性全对，但卡在黑屏或首帧延迟？问题可能出在资源层：
立即学习“前端免费学习笔记（深入）”；
- preload="metadata" 是最佳选择：只拉取时长、宽高、首帧位置等头部信息，兼顾速度与流量
- 避免
preload="auto"，尤其视频大于 2MB 时，易引发首屏加载阻塞 - 导出视频时用 H.264 Baseline/Main profile、Level ≤ 3.1，关键帧间隔（GOP）控制在 1–2 秒内
- 首屏自动播放首选 MP4（H.264 + AAC），避开 iOS Safari 不支持的 AV1/WebM
失败检测与降级提示不能省略
自动播放失败常无报错，靠肉眼无法判断是否真成功：
- 调用
play()后立即检查：!video.paused && video.readyState >= 2 - 监听
playing事件比play更可靠，它表示真正开始解码渲染 - 务必捕获
.play().catch(e => console.warn("播放被拒", e))，用于触发降级方案（如显示“点击播放”按钮） - 微信 Android（X5 内核）、QQ 浏览器等 WebView 限制更严，需额外引导用户手动触发
