手机上video autoplay不生效是因浏览器策略拦截，必须同时满足静音、用户上下文和初始属性声明；正确写法需包含autoplay、muted、playsinline、webkit-playsinline四个属性，并确保type匹配格式且play()由用户手势触发。
video autoplay 在手机上不生效，根本不是代码写错了
它被浏览器策略硬性拦截了——iOS Safari 和 Android Chrome 都要求：必须静音 + 用户上下文 + 属性初始声明，三者缺一不可。你写了 autoplay 却没播，大概率是因为 muted 没在 HTML 标签里直接写，或者视频本身带音频轨道但没真正静音。
必须同时写对这 4 个属性：autoplay、muted、playsinline、webkit-playsinline
只写其中几个，真机上大概率失败。常见错误包括：
-
muted="false"或muted="0"不生效；只有muted（无值）或muted=""才被识别 -
playsinline被漏掉 → iOS Safari 强制全屏，视觉上等于没播 -
webkit-playsinline没加 → iOS 10–12 兼容性断层，部分机型直接 fallback 到原生播放器 - 用 JS 动态设置
video.muted = true再play()→ Safari 17+ 直接中断，不报错但卡第一帧
正确写法示例：
<video autoplay muted playsinline webkit-playsinline><source src="demo.mp4" type="video/mp4"></source></video>
type 属性写错，Safari 会直接跳过整个 <source></source>
iOS Safari 依赖 type 属性快速判断是否支持该格式，不是“试试看”，而是“不匹配就忽略”。你 MP4 文件却写 type="video/webm"，结果就是黑屏、无报错、canplay 事件永远不触发。
- MP4 文件必须配
type="video/mp4" - WebM 文件才用
type="video/webm"，但 Safari 移动端根本不支持 WebM - 不要省略
type—— 即使只有一个<source></source>，也得显式声明
JavaScript 的 play() 必须由真实用户手势触发
哪怕你把所有 HTML 属性都写对了，video.play() 仍可能被拒绝，报错 NotAllowedError: play() can only be initiated by user gesture。这不是 bug，是强制规则。
- 不能在
DOMContentLoaded、window.onload或定时器里调用play() - 必须绑定到明确的用户交互：比如
click、touchstart（iOS 上比click更可靠） - 务必加
.catch(e => console.warn('play failed:', e))，否则失败静默，你根本不知道哪出了问题 - 首次播放后，后续
play()可以脚本触发（比如循环播放时），但第一次必须是“人点的”
最稳妥的做法，是默认加 muted + autoplay 让静音视频先跑起来，再用按钮提供“取消静音”入口——既绕过策略，又保留体验主动权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
