关于HTML5中Video全屏监听,退出全屏事件方法(亲测有效)
最近做视频播放,要求点击图片全屏播放视频,视频退出全屏显示图片,所以需要对video退出全屏事件进行处理,以下js方法亲测有效,测试浏览器(fireFox,GoogleChrome,MS.Edge,搜狗等)
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
//jQuery监听事件(窗口状态改变)
$(window).resize(function () {
if (checkIsFullScreen()) {
console.log("进入全屏");
} else {
console.log("退出全屏");
}
});
//js监听事件(全屏状态改变)
/*document.addEventListener('fullscreenchange', () => {
if (checkIsFullScreen()) {
console.log("进入全屏");
} else {
console.log("退出全屏");
}
});*/
//上面2个监听事件可根据项目需求2选1,然后调用此检测全屏方法
function checkIsFullScreen(){
var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
}
</script>
还没有评论,来说两句吧...