用户切换标签页时暂停 html5 视频

Question

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

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

我有一点 jQuery 可以在用户转到其他浏览器 window 或标签页时暂停视频。并且还可以在用户 returns:

时播放视频

// 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();
});

问题在于，如果用户点击地址栏或关注其他 OS window，视频也会暂停，即使视频可见且用户没有'切换标签页。

有没有办法根据当前选项卡是否打开（但不一定是焦点）来 pause/play 视频？

Answer 1

我在发布问题后几乎立即找到了答案。 Page Visibility API allows you to know when a webpage is visible or in focus. There's a nice jQuery shim called jquery-visibility 为跨浏览器解决方案提供了一个干净的 API。使用它你可以做类似的事情：

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

用户切换标签页时暂停 html5 视频

Pause html5 video when user switches tab

html

video

jquery

html5-video