autoplay需配合muted和playsinline才生效，缺一不可；ios还需playsinline防全屏中断；js需监听canplaythrough后调用play()并catch异常；视频编码、响应头及cdn策略也影响自动播放。
autoplay 属性本身不能单独生效，必须配合其他限制条件
现代浏览器（Chrome、Firefox、Safari、Edge）默认禁止有声音的视频自动播放，autoplay 属性即使写上也大概率被忽略。这不是 bug，而是策略性限制——防止用户被突兀的声音干扰。真正起作用的不是“加不加 autoplay”，而是“是否满足静音+用户交互前置”这两个硬性条件。
- 必须添加
muted属性，否则 Chrome 80+ 和 Safari 14+ 直接拒绝自动播放 - 部分 iOS/iPadOS 设备还要求
playsinline，否则会强制全屏播放，进而中断自动流程 - 即使满足以上，首次访问页面时若用户尚未与页面产生任何交互（如点击、滚动），某些版本 Safari 仍可能暂缓播放
HTML 写法要同时包含 muted、playsinline 和 autoplay
只写 <video autoplay></video> 几乎无效；必须组合使用三个关键属性，并确保顺序不影响解析（实际无顺序依赖，但习惯上把 muted 放前面强调意图）。
<video controls muted autoplay playsinline width="640" height="360"> <source src="intro.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
-
muted是强制项，缺它autoplay形同虚设 -
playsinline对移动端尤其关键，iOS 不加此属性会导致视频跳转原生全屏播放器，自动播放立即中断 -
controls可选，但建议保留，方便用户手动解除静音或暂停
JavaScript fallback：监听 canplaythrough 后主动 play()
即便 HTML 属性齐全，仍可能因网络延迟、编码格式或浏览器策略导致自动播放失败。此时需用 JS 捕获 canplaythrough 事件并调用 play() 方法，同时捕获拒绝异常避免报错阻塞逻辑。
const video = document.querySelector('video');
video.addEventListener('canplaythrough', () => {
video.play().catch(e => {
console.warn('Auto-play prevented:', e.message);
// 可在此触发 UI 提示：“点击播放” 或 自动显示播放按钮
});
});
- 不要用
loadeddata或loadedmetadata，它们触发太早，视频尚未准备好解码播放 -
play()返回 Promise，失败时会 reject，必须catch，否则控制台报错且可能影响后续脚本 - 某些安卓 WebView 或旧版 UC 浏览器对
play()调用时机更敏感，可加setTimeout延迟 100ms 再调用（非常规但有效）
服务端和编码层面的隐性影响
自动播放能否成功，不只取决于前端代码。视频文件本身和服务器响应头也会干扰：
立即学习“前端免费学习笔记（深入）”；
- 视频必须是 H.264 + AAC 编码（MP4 容器），WebM（VP9/Vorbis）在部分安卓机型上无法 autoplay
- 服务器需返回正确的
Content-Type: video/mp4，若返回text/plain，Chrome 会直接拒绝加载 - 避免使用
preload="none"，它会延迟元数据加载，拖慢canplaythrough触发时机 - 如果视频托管在 CDN，确认其未默认开启「强制用户交互后才允许媒体播放」类策略（如某些企业级 WAF 的行为策略）
playsinline 就根本不会在页面内启动，以及所有平台下没 muted 就等于没写 autoplay。 
