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

Question

如何检查网页是否在活动选项卡中打开？ 当用户离开选项卡时，我想要在我的网站上静音视频。 目前我正在使用：

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

但是当用户点击地址栏时，视频会静音，这是意外的。我能避免这种行为吗？最好的解决方案是像这个网页一样：http://volkswagen-sportscars.fr/cars/ 当用户在浏览器中打开其他选项卡时，声音会平稳下降。它是如何制作的？

- Adam Golab

---

你有没有实际查看过他们网站上使用的JavaScript源代码，还是先来问我们的意见？ - RevanProdigalKnight

好的，我会尽力为您翻译。以下是需要翻译的内容：参见：https://dev59.com/d3NA5IYBdhLWcg3wL6sc - keune

是的，我看到了这个，但它并没有回答我的问题。 - Adam Golab

Answer 1

较新的浏览器（IE10及以上版本）支持页面可见性API。

页面可见性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]);
}

演示

- adeneo