HTML5视频在标签页失焦时会被浏览器自动暂停，无法通过纯HTML或JS绕过，仅当满足“用户交互触发+静音+autoplay”或启用画中画（PiP）时才可能后台播放。
HTML5 视频默认在浏览器标签页失焦（切换到其他标签页或最小化窗口）时会被浏览器自动暂停，这是大多数现代浏览器（Chrome、Edge、Firefox）的默认行为，目的是节省资源和电池。无法通过纯 HTML 或 JavaScript 直接绕过这个限制——除非用户主动授予“后台播放”权限，且页面满足特定条件。
为什么 video.play() 在标签页切走后会失败
当用户离开当前标签页，document.hidden 变为 true，此时调用 video.play() 会抛出 NotAllowedError: play() failed because the user didn't interact with the document first 或静默失败。即使之前已手动播放过，一旦页面进入非活跃状态，后续自动恢复播放仍受限制。
- 浏览器将“用户手势（user gesture）”限定在当前可见、聚焦的标签页内
-
visibilitychange事件触发时，video.paused很可能已是true，且无法在非活跃状态下重新play() - 自动播放策略（Autoplay Policy）对无声音/有声音、用户交互历史、媒体类型均有不同判定
真正可行的后台播放前提：必须满足“用户已交互 + 静音 + 自动播放策略豁免”
只有同时满足以下全部条件，视频才可能在切换标签页后继续播放：
- 视频元素设置了
muted属性（强制静音） - 视频设置了
autoplay属性（或首次由用户点击触发播放后，再通过 JS 恢复） - 首次播放必须由用户真实交互触发（如
click、touchstart），不能是setTimeout自动调用 - 后续恢复逻辑需监听
visibilitychange，并在document.visibilityState === 'visible'时尝试恢复（但注意：仅在可见时才可能成功）
<video id="myVideo" muted autoplay>
<source src="video.mp4" type="video/mp4">
</video>
<button id="playBtn">点我开始播放</button>
<script>
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
video.play().catch(e => console.warn('Play failed:', e));
});
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// 页面重新可见，尝试恢复（仅当视频已暂停且有 mute 才可能成功）
if (video.paused && video.muted) {
video.play().catch(e => console.debug('Resume on visible failed:', e));
}
}
});
</script>
Chrome / Edge 中的“画中画 + 后台播放”变通方案
Chrome 99+ 和 Edge 101+ 支持在启用画中画（PiP）后，即使切换标签页，视频仍可继续播放（前提是 PiP 窗口保持打开）。这不是传统“后台标签页播放”，但能达到类似效果：
立即学习“前端免费学习笔记（深入）”；
- 调用
video.requestPictureInPicture()必须由用户手势触发 - PiP 激活后，原标签页可被切换，视频音频持续播放
- 退出 PiP（关闭 PiP 窗口）后，视频会回到原页面并暂停，需再次交互才能恢复
- 不依赖
muted，有声视频也可用
btn.addEventListener('click', async () => {
try {
await video.requestPictureInPicture();
} catch (err) {
console.error('PiP failed:', err);
}
});
服务端或 Electron 等非浏览器环境才是稳定解
如果你的实际场景需要绝对可靠的后台音视频持续播放（比如播客 App、会议工具、监控看板），纯 Web 页面受限于浏览器策略，几乎无法 100% 可靠实现。更现实的路径是：
- 改用 Electron 或 Tauri 封装，绕过浏览器标签页生命周期限制
- 使用 Web Audio API + 解码后的音频帧（需自行解码 MP4/H.264，复杂度高，仅适合音频）
- 移动端可考虑 WebView + 原生后台服务（如 Android 的 Foreground Service）
- 避免依赖“切标签不停”的设计；改为提示用户“请保持本页可见”或提供 PiP 入口
别在 visibilitychange 里反复重试 play()，它不会因为多试几次就成功——失败的根本原因是浏览器策略，不是时机没踩准。
