video自动播放失败主因是浏览器策略限制，必须配合muted且由用户手势触发；ios还需添加playsinline属性才能内联播放。
video 标签不自动播放的常见原因
浏览器默认阻止自动播放（尤其带声音的），这是硬性策略，不是 bug。Chrome、Safari、Firefox 都强制要求 autoplay 必须配合 muted 才能生效，否则静音状态下也可能被拦截。
- 没加
muted属性：即使视频本身没声音，也得显式写上muted - 用户未与页面交互就触发播放：比如页面一加载就调
play()，多数浏览器会拒绝并抛出NotAllowedError - 视频格式不支持：用
mp4最稳妥，webm在部分旧 Android 上可能失败
如何让 video 正常加载并播放
关键不是“怎么写标签”，而是“什么时候调 play()”。靠 HTML 属性只能做基础控制，真正可靠的播放必须由用户手势触发（如点击、触摸）。
- HTML 中至少保留
src和controls（调试用），先不用急着加autoplay - JS 中监听用户点击事件，再调
video.play()；不要在DOMContentLoaded或load里直接调 - 捕获播放失败：用
.play().catch(e => console.error(e))，典型错误是NotAllowedError或AbortError - 如果真要自动静音播放，确保同时有
autoplay、muted、playsinline（iOS Safari 必需）
移动端 iOS Safari 的特殊限制
iOS 上的限制最严：不支持后台播放、不响应 play() 除非用户手势、且强制要求 playsinline 才能在页面内播放（否则全屏）。
- 必须加
playsinline属性，否则点播放会跳转全屏，且无法通过 JS 控制退出 -
webkit-playsinline是旧写法，现在只用playsinline即可 - 不要依赖
preload="auto"：iOS 会忽略它，视频资源仍按需加载 - 如果用
object-fit: cover调整尺寸，记得给video加width和height，否则 Safari 可能渲染异常
用 JavaScript 控制播放状态的实际写法
别把 play() 当成开关按钮——它返回 Promise，失败时不会抛异常，但也不会继续执行后续逻辑。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
button.addEventListener('click', () => { video.play().then(() => { console.log('播放已开始'); }).catch(err => { console.warn('播放被阻止:', err.name); }); }); - 暂停用
video.pause()，它同步执行，无 Promise - 检查当前状态看
video.paused（true 表示暂停或未播），而不是靠监听事件猜 - 想等视频元数据就绪再操作？监听
loadedmetadata事件，不是canplay（后者可能还没解码完）
playsinline 就等于放弃内联播放。 
