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

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

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

但当用户点击地址栏时，视频会被静音，所以这是出乎意料的。我能避免这种行为吗？最好的解决方案是这样的：当用户在浏览器中打开其他选项卡时，声音会被平滑地调低。它是如何制作的？

较新的浏览器（IE10及以上）支持

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

---

你是否真的看过他们网站上使用的javascript源代码，或者你只是先问我们？看：是的，我看到了，但我的问题没有回答这个问题