现代浏览器仅允许在用户首次点击、触摸或按键后立即播放音视频，必须在可信事件处理器内直接调用play()且不可异步延迟；需预加载并静音，处理失败降级，并监听页面可见性维持用户激活状态。
在用户首次点击、触摸或按键后立即播放带声音的视频或音频，是现代浏览器唯一允许的“唤醒式自动播放”方式。关键不是绕过限制，而是严格遵循用户手势（user gesture）上下文规则——所有 play() 调用必须发生在可信事件处理器内部，且不能被异步延迟破坏上下文。
绑定可信用户事件触发播放
仅监听 click 最稳妥；touchstart 适合移动端；keydown 可作为辅助（如空格键）。避免使用 scroll 或 mousemove，它们在多数浏览器中不构成有效激活。
- 给任意可交互元素（按钮、封面图、文字提示）添加事件监听器
- 在回调函数内直接调用
video.play()或audio.play() - 不要包裹在
setTimeout、Promise.then或requestAnimationFrame中——这会丢失手势上下文
预加载并静音备用，提升响应速度
用户点击前就让媒体进入“就绪”状态，能显著减少点击到出声的延迟。静音（muted）是预加载的前提，否则浏览器可能拒绝加载音频轨道。
- HTML 中设置
<video preload="metadata" muted></video>，只加载元数据（时长、尺寸、首帧） - 配合
<source></source>提供 MP4 和 WebM 格式，覆盖 Safari 与 Firefox 差异 - JavaScript 中可监听
canplay事件确认已就绪，但不必等它再触发播放——点击时直接play()即可
处理播放失败并自动降级
即使在用户手势中调用 play()，仍可能因格式不支持、网络中断或 iOS 特殊策略失败。需捕获 Promise 拒绝并提供 fallback。
- 检查返回的
play()Promise 是否被 reject - 若失败，尝试设为静音后重试：
video.muted = true; video.play(); - 失败时显示友好提示（如“请点一下屏幕继续播放”），而非静默卡住
保持用户激活状态持续有效
页面切到后台一段时间后，navigator.userActivation.hasBeenActive 可能变为 false，导致后续播放失效。需主动监听重新激活。
- 监听
visibilitychange事件，当document.hidden === false时检查navigator.userActivation.hasBeenActive - 若为
false，绑定一次click监听器，用户下次点击即恢复激活 - 无需重复绑定，一次有效即可，浏览器会维持该文档的激活窗口期
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
