移动端HTML5视频自动播放需同时满足静音、用户上下文及正确属性组合：autoplay与muted必须作为HTML属性一次性写死在video标签中，且须添加playsinline和webkit-playsinline以确保内联播放。
移动端 HTML5 媒体自动播放失效，不是代码写错了，而是浏览器主动拦截——所有主流环境（iOS Safari、Android Chrome、微信 X5 内核等）都执行统一策略：必须静音 + 用户上下文 + 正确属性组合，三者缺一不可。
核心属性必须一次性写死在标签里
autoplay 要生效，muted 必须作为 HTML 属性直接出现在 <video></video> 标签中，不能靠 JS 后续设置；否则 Safari 17+ 会中断播放，Chrome 也大概率失败。
- ✅ 正确写法：
<video autoplay muted playsinline webkit-playsinline preload="metadata" src="a.mp4"></video> - ❌ 错误写法：
<video autoplay></video>+video.muted = true（加载后赋值无效） - muted 必须是布尔属性，写成
muted=""或muted="muted"都可，但muted="false"无效
移动端必须强制内联播放
iOS Safari 默认把视频当全屏媒体处理，不加 playsinline 就会跳转原生播放器，视觉上等于没播；安卓部分 WebView（如旧版 X5）同样依赖它保持页面布局。
-
playsinline是标准属性，必须写；webkit-playsinline是 iOS 10–12 兼容必需项，建议并存 - display: none 或
visibility: hidden隐藏，即使属性齐全也会静默失败
预加载与格式要兼顾兼容与首帧速度
preload="metadata" 是自动播放场景的推荐固定写法：只加载时长、宽高、首帧位置等必要信息，避免 auto 导致过早下载拖慢首帧，也比 none 更可靠（Safari 13+ 对 none 处理更激进）。
立即学习“前端免费学习笔记（深入）”；
- 优先用 MP4 封装 + H.264 Baseline/Main Profile、Level ≤ 3.1 编码，关键帧间隔（GOP）控制在 1–2 秒
- 对 iOS Safari，WebM/VP9 仅 iOS 15+ 支持，首屏动效务必 fallback 到 MP4
-
<source></source>标签中不要重复设preload，它只作用于<video></video>根标签
必须监听状态并提供手动兜底
即使属性全对，微信 Android（X5）、弱网、后台标签页等仍可能静默失败。不能只靠 HTML 属性，要主动检测并降级。
- 调用
video.play()后，检查!video.paused && video.readyState >= 2，比看控制台报错更可靠 - 监听
playing事件（而非play），它表示真正开始解码渲染 - 失败时立即显示“点击播放”按钮或轻量提示，别让用户干等；有声需求可走“先静音自动播 → 用户点一下再开声”两步方案
