浏览器切换标签暂停视频但最小化窗口保持播放的实现问题

问题原因 #

PageVisibility API的document.visibilityState = 'hidden'状态本身覆盖了多种场景：

• 切换到同一浏览器窗口的其他标签页
• 浏览器窗口被最小化
• 浏览器窗口被其他应用完全遮挡
  所以你的原有逻辑会在所有hidden场景下都触发视频暂停，无法区分你要的两种场景。

解决方案 #

通过窗口尺寸判断区分「切换标签」和「最小化窗口」场景：切换标签时当前标签对应的窗口尺寸不会变化，而最小化窗口时window.innerWidth和window.innerHeight会变为0（或极小值），组合判断即可实现需求。
修改后的代码如下：

var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
    if(document.visibilityState === "hidden") {
        // 仅当窗口尺寸正常时（非最小化），才暂停视频
        if(window.innerWidth > 100 && window.innerHeight > 100) {
            videoElement.pause();
        }
    } else if(document.visibilityState === "visible") {
        videoElement.play();
    }      
})

这里设置100的阈值是为了兼容部分浏览器最小化时不会完全返回0尺寸的情况，你可以根据实际需求调整阈值。

补充说明 #

如果你的场景需要同时排除「窗口被其他应用完全遮挡」的暂停场景，可以额外结合window.focus事件做状态标记，核心逻辑是在窗口失焦时标记状态，hidden状态下如果同时窗口失焦就不触发暂停。

内容的提问来源于stack exchange，提问作者Aadesh