移动端video autoplay失效因浏览器禁止无用户交互的自动播放，必须静音+在点击等同步事件中调用play()，并检查readystate≥2和playing事件确认生效。
video 标签 autoPlay 属性在移动端为何失效
因为 iOS Safari 和大多数 Android 浏览器（Chrome、Firefox 移动版等）默认禁止无用户交互触发的音视频自动播放，这是硬性策略，不是 bug。即使写了 autoplay、muted，也常被忽略或静音后仍不播——关键在于浏览器判断“是否可信的用户手势上下文”。
必须加 muted 且用 JavaScript 触发 play() 才可能成功
移动端自动播放唯一可靠路径是：视频静音 + 在用户点击/触摸等事件中调用 play() 方法。仅靠 HTML 属性无法绕过限制。
-
autoplay和muted必须同时存在，但仅写在标签里通常不够 - 必须监听如
touchstart、click等**同步、非异步延迟**的用户事件 - 不能在
setTimeout、Promise.then或 Ajax 回调里调用play()，否则会报NotAllowedError: play() can only be initiated by a user gesture - iOS 10+ 要求
playsinline属性，否则可能全屏打开
<video id="myVideo" muted playsinline>
<source src="video.mp4" type="video/mp4">
</video>
<button id="playBtn">点此播放</button>
<script>
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
video.play().catch(e => console.error('Autoplay prevented:', e));
});
</script>
如何检测 autoplay 是否实际生效
不能只看有没有报错，要检查 video.readyState 和 video.paused 状态，因为部分浏览器会静默失败（不抛错但也不动）。
- 调用
play()后立即检查：!video.paused && video.readyState >= 2（readyState≥ 2 表示已有足够数据可开始播放） - 监听
playing事件比play更可靠，它表示真正进入播放状态 - 若失败，可降级显示提示或按钮：“请手动点击播放”
安卓 WebView 和微信内置浏览器的特殊处理
微信 Android（X5 内核）、QQ 浏览器、部分厂商 WebView 对 autoplay 更严格，甚至 muted + 用户手势 也可能被拦截，需额外配置。
立即学习“前端免费学习笔记（深入）”；
- Android WebView 需在 Java/Kotlin 侧启用：
webSettings.setMediaPlaybackRequiresUserGesture(false)（仅限 App 自有 WebView，网页不可控） - 微信内建议加
x5-video-player-type="h5"和x5-video-player-fullscreen="false"属性，帮助 X5 内核识别 H5 播放意图 - 避免使用
loop+autoplay组合，某些版本会直接禁用整个 video 元素
