如何判断浏览器/选项卡是否处于活动状态，并在用户离开时调低音量

How to tell if browser/tab is active, and turn down volume sound when user leave

本文关键字：用户 活动状态 离开 判断 何判断 浏览器 是否 选项      更新时间：2023-09-26

如何在活动选项卡中检查页面是否打开?我想在我的网站上静音视频，当用户离开标签。目前我使用的是:

$(window).on('focus', function() {
    $("video").prop('muted', false);
});

但是当用户点击地址栏视频静音，所以这是意想不到的。我能避免这种行为吗?最好的解决方案是类似于这个网页:http://volkswagen-sportscars.fr/cars/当用户在浏览器中打开其他选项卡时，声音会被平滑地关闭。它是怎么做的?

较新的浏览器(IE10及以上)支持页面可见性API

Page Visibility API让你知道一个网页何时可见的焦点。有了标签式浏览，有一个合理的机会给定的网页是在后台，因此不可见的用户。当用户最小化网页或移动到另一个选项卡时，API发送一个关于页面可见性的visibilitychange事件。您可以检测事件并执行一些操作或行为不同。例如，如果你的web应用正在播放视频，它会在用户看另一个浏览器时暂停，然后重新播放当用户返回到选项卡时。用户不会失去他们的位置在视频中，可以继续观看。

用了这样的东西

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
function handleVisibilityChange() {
    $("video").prop('muted', document[hidden]);
}

相关文章：