现代浏览器禁止有声视频自动播放是策略性限制，非代码错误；唯一可行方案是同时满足静音、autoplay属性与用户交互就绪三项条件。
现代浏览器不允许有声音视频在页面加载时自动播放，这是策略性限制，不是代码写错了；唯一能绕过该限制的方式是让 <video> 或 <audio> 同时满足静音 + 自动播放 + 用户交互就绪这三项条件。
autoplay 属性为什么经常失效
写了 autoplay 却没反应，根本原因是浏览器策略拦截——Chrome ≥66、Safari ≥11、Edge ≥79 默认屏蔽所有未静音的自动播放请求。它不报错，只是静默忽略 autoplay，导致视频卡在首帧、音频完全无声。
-
autoplay单独存在毫无作用，必须搭配muted才可能生效 -
muted必须是 HTML 属性（即写在标签里），不能靠 JS 动态设置，否则 Safari 17+ 会中断已开始的播放 - 即使加了
muted，若视频格式不兼容（如 AV1/WebM）、服务器不支持 CORS 或未开启 HTTP Range，仍可能加载失败或卡顿
iOS 设备上 video 自动播放必加的三个属性
iOS Safari 对自动播放限制最严，仅靠 autoplay 和 muted 还不够，必须补全以下三者：
-
muted：强制静音，触发自动播放前提 -
playsinline：标准属性，防止跳转全屏、保持内联布局 -
webkit-playsinline：旧版 iOS（10–12）兼容写法，漏掉会导致部分机型失效
正确写法示例：<video autoplay muted loop playsinline webkit-playsinline><source src="vid.mp4" type="video/mp4"></video>
立即学习“前端免费学习笔记（深入）”；
有声播放必须等用户首次有效交互
想让用户一打开页面就听到声音？不行。浏览器只允许在“用户激活”（user activation）后才解除静音并播放音频，且这个交互必须是明确、同步、非延迟的。
- 合法事件：
click、touchstart（注意 iOS Safari 对touchstart的触发时机敏感）、keydown - 非法触发点：
scroll、mousemove、setTimeout、Promise.then—— 这些都不算用户激活 - 关键顺序：必须先执行
video.muted = false，再立即调用video.play()；中间不能插入异步操作，否则会抛NotAllowedError
preload 和视频编码对自动播放体验的影响
即使属性全对，首帧卡顿、黑屏几秒仍是常见问题，根源常在资源加载策略和视频本身。
-
preload="metadata"是自动播放场景的最优选择：只拉取头信息（时长、宽高、编码），不下载画面数据，兼顾速度与流量 - 避免
preload="auto"，尤其视频 >2MB 时，容易拖慢首帧就绪时间 - H.264 编码必须用 Baseline 或 Main profile、Level ≤ 3.1；GOP（关键帧间隔）控制在 1–2 秒内，否则解码器要等首个 IDR 帧，造成明显黑屏
- iOS 不支持 AV1，WebM 在 Safari 中无法解码，MP4 是唯一稳妥选项
真正难的不是加几个属性，而是把静音、交互、preload、编码、服务端配置这五件事串成一条无断点的链路——漏掉任意一环，用户看到的就是一张不动的图或一段沉默的页面。
