Question

在我的页面上，我有一个按以下方式进入全屏模式的视频：

$('.fullscreen-btn').click(function () {
            if (movie[0].requestFullscreen) {                
              movie[0].requestFullscreen();
            } else if (movie[0].mozRequestFullScreen) {                
                movie[0].mozRequestFullScreen();              
            } else if (movie[0].webkitRequestFullscreen) {                
                movie[0].webkitRequestFullscreen();
            } else if(movie[0].webkitEnterFullscreen){ //ipad fix
                movie[0].webkitEnterFullscreen();
            } else if (movie[0].msRequestFullscreen){ //IE fix
                movie[0].msRequestFullscreen();
            }
            //followed by some code for smallscreen button, positioning customized play and pause button etc. 
});

当我离开全屏模式时，我有以下代码来检测它：

$('.smallscreen-btn').click(function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();                   
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
                if(movie[0].webkitExitFullscreen){ //ipad specific
                ...
                }
});

但我不知道IE的条件是什么：我尝试了if(document.msExitFullScreen){...}，if(movie[0].msExitFullScreen){...}

所以我知道如何检测进入全屏模式但不取消它。谁知道什么可行？

Answer 1

应广泛支持此JavaScript（vanilla）解决方案。这是一个小的api，可以让您检测客户端何时进入全屏模式以及何时退出。它是事件驱动的，因此使用起来非常简单，并且可以在所有支持DOM2的customEvent浏览器上运行。不支持outerHeight : innerHeight属性的浏览器（足够老）将失败。

onresize = function() {
        var state = 1 >= outerHeight - innerHeight ? "fullscreen" : "windowed";
            if( window.state == state ) return;
        window.state = state;
        var event = document.createEvent("Event");
            event.initEvent(state, true, true);
            window.dispatchEvent( event );
    };

    addEventListener('windowed', function(e){ alert(e.type) }, false );
    addEventListener('fullscreen', function(e){ alert(e.type) }, false );

*！从未在智能手机上测试过，请检查并提供相关反馈。

如何检测Internet Explorer视频是否退出全屏模式？

1 个答案: