关于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>    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近做了一个小需求。大概是微信H5端点击视频。然后全屏播放;功能挺简单的吧。这边用的就是html的video组件。...
    小小小小的人头阅读 2,444评论 0 0
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 6,135评论 0 4
  • 公元:2019年11月28日19时42分农历:二零一九年 十一月 初三日 戌时干支:己亥乙亥己巳甲戌当月节气:立冬...
    石放阅读 6,948评论 0 2