可通过监听 visibilitychange 事件并结合 document.hidden 属性实现页面可见性变化时的视频暂停与恢复；需确保视频元素存在，注意 play() 可能因浏览器策略被拒绝，建议先通过用户手势触发一次播放，并兼容旧版 Safari 的 pagehide/pageshow 事件。
可以通过监听页面的 visibilitychange 事件，结合 document.hidden 属性，在页面不可见时暂停视频，可见时恢复播放。
监听 visibilitychange 事件
这是 BOM 提供的标准 API，用于检测页面是否被切换到后台（如切到其他标签页、最小化浏览器、锁屏等）：
- 当用户离开当前页面时，document.hidden 变为 true
- 当用户切回该页面时，document.hidden 变为 false
- 需在页面加载完成后绑定事件，避免监听失效
获取并控制视频元素
确保能正确拿到 <video> 元素（可通过 ID、class 或 querySelector）：
- 推荐使用
document.getElementById('myVideo')或document.querySelector('video') - 检查元素是否存在，避免调用
play()或pause()报错 - 可加一层判断：仅当视频处于播放状态且页面隐藏时才暂停（避免重复操作）
暂停与恢复逻辑示例
基础写法如下（兼容主流浏览器）：
立即学习“Java免费学习笔记（深入）”；
const video = document.getElementById('myVideo');
function handleVisibilityChange() {
if (document.hidden) {
video.pause();
} else {
video.play().catch(e => console.warn('自动播放被阻止：', e));
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
注意：video.play() 可能因浏览器策略被拒绝（尤其无用户交互前提下），建议配合按钮点击等用户手势触发一次播放，后续 visibilitychange 中再调用会更稳定。
补充：兼容旧版 Safari（iOS & macOS）
部分老版本 Safari 不支持 visibilitychange，但支持 pagehide / pageshow：
-
pagehide触发时机类似visibilitychange（页面即将隐藏） -
pageshow在页面重新显示时触发（含从缓存恢复） - 可同时监听两者，增强兼容性，但优先以
visibilitychange为准
