Page Lifecycle 网页生命周期 (视频状态)

最新推荐文章于 2024-11-25 19:11:33 发布

原创最新推荐文章于 2024-11-25 19:11:33 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用浏览器的可见性API来检测页面是否处于活动状态。通过监听visibilitychange事件，可以实现当页面失去焦点时暂停视频播放，当页面重新获得焦点时恢复播放。此功能对于节省资源和提高用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 各种浏览器兼容
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
}

// 添加监听器
document.addEventListener(visibilityChange, function() {

    console.log(document[state])
    if(document[state] == 'hidden'){
        $("video").trigger('pause');
    }
    if(document[state] == 'visible'){
        $("video").trigger('play');
    }
}, false);

document.onvisibilitychange 通过这个属性指定事件的回调函数 document.visibilityState 获取当前状态