关于HTML5中Video全屏监听,退出全屏事件方法(亲测有效)-蒲公英云

关于HTML5中Video全屏监听,退出全屏事件方法(亲测有效)

男娘i 2022-09-12 01:44 1198阅读 0赞

最近做视频播放,要求点击图片全屏播放视频,视频退出全屏显示图片,所以需要对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>