用户切换选项卡时暂停html5视频

Question

我的网页上嵌入了HTML5视频：

<video id="myvideo">
    <source src="videos/myvideo.mp4">
</video>

当用户访问不同的浏览器窗口或标签时，我有一些jQuery暂停视频。并且还在用户返回时播放视频：

// pause when the user leaves this window/tab
$(window).blur(function(){
    $('#myvideo').get(0).pause();
});

// play when the user returns to this window/tab
$(window).focus(function(){
    $('#myvideo').get(0).play();
});

这样做的问题是，如果用户点击位置栏或关注不同的操作系统窗口，即使视频可见且用户未切换标签，也会暂停视频。

有没有办法根据当前标签是否打开（但不一定是焦点）来暂停/播放视频？

Answer 1

我在发布问题后几乎立即找到答案。 Page Visibility API可让您了解网页何时可见或焦点对齐。这是一个很好的jQuery shim，名为jquery-visibility，为跨浏览器解决方案提供了一个干净的API。使用它你可以做类似的事情：

$(document).on('show.visibility', function() {
    $('#myvideo').get(0).play();
});
$(document).on('hide.visibility', function() {
    $('#myvideo').get(0).pause();
});