移动端html5视频自动播放必须满足静音+用户上下文+正确属性组合，muted须初始声明在video标签中，配合playsinline和preload="metadata"才能可靠生效，否则会被浏览器拦截。
移动端 HTML5 视频自动播放受限，核心不是代码写错，而是浏览器主动拦截——所有主流浏览器（Safari、Chrome、Firefox、Edge）都要求：必须静音 + 用户上下文 + 正确属性组合，缺一不可。
必须初始声明 muted 属性
autoplay 要生效，muted 必须作为 HTML 属性直接写在 <video></video> 标签里，不能靠 JS 后期设置。浏览器只认加载时就“可信静音”的状态。
-
<video autoplay muted playsinline></video>✅ 正确 -
<video autoplay></video>+video.muted = true❌ 失效（尤其 Safari 17+ 会中断播放） - muted 不带值或写成
muted="false"都无效，必须是muted或muted=""
强制内联播放：playsinline 是刚需
iOS Safari 默认把视频当全屏媒体处理，不加 playsinline 就会跳转全屏，视觉上等于没播；安卓部分 WebView 也依赖它保持页面布局。
- 必须显式写
playsinline，它是标准属性，不可省略 - 为兼容 iOS 10–12，建议同时加上
webkit-playsinline - 仅靠 CSS 设置
object-fit或width/height无法替代该属性
预加载策略选 metadata 更稳妥
preload="auto" 可能触发过早下载、拖慢首帧，甚至干扰 autoplay 判断；preload="metadata" 只加载时长、宽高、首帧位置等必要信息，兼顾速度与兼容性。
- 对背景视频、首屏动效等场景，
preload="metadata"是推荐固定写法 - Safari 13+ 对
preload="none"处理更激进，首次播放易卡顿 - 避免在
<source></source>标签里重复设 preload，它只作用于<video></video>根标签
失败兜底：监听状态 + 提供手动入口
即使属性全对，微信 Android（X5 内核）、弱网、后台标签页等仍可能静默失败。不能只靠 HTML 属性，要主动检测并降级。
- 调用
video.play()后，检查!video.paused && video.readyState >= 2，比看控制台报错更可靠 - 监听
playing事件确认真正开始播放，而非仅触发play() - 失败时显示“点击播放”按钮，用户点击后再执行
video.muted = false; video.play()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
