怎么利用HTML的visibilitychange事件在页面切到后台时暂停视频播放

苏承栈

2026-09-08 • 👁 0人浏览过

visibilitychange 事件需在 DOM 解析早期注册，否则冷启动或后台恢复时会错过初始状态；恢复播放须延迟并检查 readyState；有声视频必须 muted 才能 autoplay；还需统一管理 rAF、AudioContext 等资源。 visibilitychange 事件注册时机不对，监听就失效了页面切后台时

visibilitychange

没触发，大概率不是 API 不工作，而是监听加晚了。比如把

addEventListener('visibilitychange', ...)

放在

DOMContentLoaded

之后、或包裹在

setTimeout

import()

动态加载逻辑里，就可能错过初始状态——尤其是 PWA 冷启动、iOS 微信从后台恢复时，

document.hidden

一开始就是

true

，但事件不会“回补”。必须在 DOM 解析阶段尽早注册：直接写在