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

【问题标题】：How to detect if Internet Explorer video exits fullscreen mode?如何检测 Internet Explorer 视频是否退出全屏模式？
【发布时间】：2014-03-03 09:12:14
【问题描述】：

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

$('.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){...}

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

【问题讨论】：

也许是文档中所说的 MSFullscreenChange？ msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
哦，是的！谢谢！ msExitFullScreen 不起作用，但 MS 全屏更改事件：msdn.microsoft.com/en-us/library/ie/dn312066%28v=vs.85%29.aspx 完成了这项工作:)
谷歌有时会帮忙 ;)
我试过了，但似乎我没有这方面的天赋；）

标签： jquery internet-explorer video fullscreen

【解决方案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 );

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

【讨论】：