html5的page visibility api通过document.hidden和visibilitychange事件检测页面可见性，实现视频自动暂停/恢复：页面不可见时调用video.pause()，可见时可选video.play()（需处理自动播放限制），兼容主流浏览器但受ios safari后台限制。

当用户切换到其他标签页或最小化浏览器时，HTML5 的 document.hidden 和 visibilitychange 事件可以帮你检测页面是否可见，从而自动暂停视频，节省资源、避免误播。

监听 visibilitychange 事件

这是核心机制。页面可见性变化时会触发该事件，配合 document.hidden 判断当前状态：

• document.hidden === true 表示页面不可见（如切走标签页、最小化窗口）
• document.hidden === false 表示页面可见

获取并控制视频元素

确保你的 <video></video> 元素有明确的 ID 或可稳定获取的方式，例如：

Somark Document Parser

使用 SoMark 将 PDF、图片（PNG/JPG/BMP/TIFF/WebP/HEIC）、Word、PPT 及其他文档解析为 Markdown 或 JSON，满足各类文档解析需求（如简历等）。

下载

在 JS 中用 document.getElementById('myVideo') 获取后，即可调用 play() 或 pause()。

绑定逻辑：不可见时暂停，恢复时可选继续

推荐默认暂停，是否自动恢复播放按需决定（比如用户返回时继续播放，可能影响体验，建议谨慎）：

• 监听 visibilitychange，检查 document.hidden
• 若为 true，调用 video.pause()
• 若为 false 且希望续播，可加 video.play().catch(e => console.warn("Auto-play prevented:", e))（注意现代浏览器对自动播放有限制）

兼容性与注意事项

Page Visibility API 在所有主流浏览器中支持良好（包括移动端），但要注意：

• 部分 iOS Safari 在后台时即使页面“可见”，音频/视频也会被系统强制暂停，JS 无法绕过
• 不要依赖 visibilitychange 做关键业务逻辑（如计时、支付），它不保证精确触发时机
• 如果页面含多个视频，遍历处理即可，无需额外框架

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！