现代浏览器禁用有声视频自动播放，autoplay 仅在用户交互或视频静音（muted）时生效；muted 必须显式声明且配合 playsinline、正确响应头等条件，否则仍会失效。
video autoplay 失效的真正原因不是没写属性，而是浏览器策略卡死
现代浏览器（Chrome、Safari、Firefox、Edge）已默认禁用有声视频的自动播放，autoplay 单独存在基本无效——它不是“建议播放”，而是“请求播放权限”，而该权限只在两个条件之一满足时才授予：用户已发生交互，或视频已静音。
常见错误现象包括：页面加载后黑屏、控制台无报错但 play() 调用静默失败、iOS 上视频强制全屏弹出。这些都不是代码写错了，而是策略未被满足。
-
muted必须作为 HTML 布尔属性显式声明（muted或muted=""），写成muted="false"会被视为已静音，反而触发策略拒绝 -
autoplay同理，不能靠 JS 后续赋值video.autoplay = true来补救——必须在元素插入 DOM 前就存在 - 即使写了
muted，若视频资源返回 404、CORS 头缺失、或Content-Type错误（如返回text/plain），也会导致元数据加载失败，play()被拒
为什么加了 muted 还不播？这 3 个漏点最常被忽略
写对 autoplay muted 只是第一步；实际部署中，以下问题会导致“明明静音了却还是不播”：
- iOS Safari 要求同时声明
playsinline，否则即使静音也会强制全屏，且部分机型直接拒绝播放 - 视频用了
preload="none"但没手动调用load()，导致首帧元数据未加载，play()被浏览器判定为“无效时机” - 开发时 localhost 正常，上线后 CDN 或反向代理重写了响应头（如删了
Access-Control-Allow-Origin: *或覆盖了Content-Type），这类问题不会抛 JS 异常，只表现为黑屏不动
JS 动态创建 video 时，muted 必须在 play() 前设，且不能靠后续赋值绕过
用 document.createElement('video') 创建元素时，muted 不是“可选配置”，而是播放资格的准入门槛：
立即学习“前端免费学习笔记（深入）”；
- 必须在调用
play()之前设置video.muted = true，顺序错即失效 -
video.muted = true是运行时行为，但它**不恢复 autoplay 权限**；如果元素没带autoplay属性，仅设 muted 并不能触发自动播放 - 正确组合是：
video.autoplay = true+video.muted = true+video.playsInline = true，三者缺一不可 - 调用
play()需用.catch()捕获异常，因为即使全条件满足，某些低电量模式或系统设置仍可能拒绝
loop 和 muted 的配合不是可选项，而是强制依赖关系
loop 属性本身不触发播放，它只在视频自然结束时跳回开头；但如果初始 autoplay 因未静音被拦截，loop 根本没有机会执行。
-
loop必须写成布尔属性（<video loop></video>），不能用setAttribute('loop', 'true')—— 后者只是字符串操作，videoEl.loop读出来仍是false - iOS 上
loop常失效，需监听ended事件手动currentTime = 0; play()，且必须真机测试，模拟器不反映真实策略 - 若同时需要
autoplay+loop+ 有声，唯一合规路径是：先静音自动播 → 等待用户点击 →video.muted = false; video.play()，且该play()必须发生在用户手势回调内
最易被忽略的是：所有这些限制在本地开发时往往“看起来正常”，因为浏览器对 localhost 更宽松；一旦上线，任何中间层（CDN、WAF、Nginx）对响应头或 MIME 类型的微小改动，都会让静音策略瞬间失效——而你根本收不到 JS 错误。
