我的网页上嵌入了一个 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();
});
这样做的问题是,如果用户单击地址栏或关注不同的操作系统窗口,即使视频可见并且用户没有切换选项卡,视频也会暂停。
有没有办法根据当前选项卡是否打开(但不一定聚焦)来暂停/播放视频?
我在发布问题后几乎立即找到了答案。这页面可见性API https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API让您知道网页何时可见或处于焦点状态。有一个很好的 jQuery shim 叫做jquery 可见性 https://github.com/mathiasbynens/jquery-visibility为跨浏览器解决方案提供了干净的 API。使用它你可以做类似的事情:
$(document).on('show.visibility', function() {
$('#myvideo').get(0).play();
});
$(document).on('hide.visibility', function() {
$('#myvideo').get(0).pause();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)