如何检测iOS离开全屏视频？

Question

如何检测iOS上的视频何时关闭？我正在运行videojs,它将HTML5视频作为原生视频播放器发布.为了做出正确的反应,我希望在本机玩家关闭时获得一个事件.

这里有几个类似的问题,但没有答案可行.

我试过的第一个解

player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

解决方案是在2012年提出的:如何确定HTML5视频播放器何时进入iOS/iPad上的全屏模式？

这种方法对我不起作用.该事件不会被解雇(至少在iOS模拟器中),我无法做任何事情.

我试过第二个解决方案

// Do on resize
if(video.webkitDisplayingFullscreen == false){
    // Exit was triggered    
}

解决方案甚至早于2012年提出:iPhone上的全屏视频播放器是否有"onClose"事件？

此方法也不起作用,视频元素没有此属性(至少在iOS模拟器中).顺便说一句,这种方法已被弃用.

有没有人知道如何获得有关iOS现在离开全屏的通知？

Answer 1

您现在可能已经找到了解决方案,但我在iPad和iPhone上遇到了同样的问题.我发现没有任何fullscreenchange事件在这些设备上发射,尽管它在其他地方工作得很好.

我在http://html5wood.com/html5-video-fullscreen-change-events-on-ipad/找到了我的解决方案,但我也会在这里解释完整性:

除了用于全屏转换的各种其他事件监听器之外,我补充道

var video = document.getElementById(myVideo);

video.addEventListener("webkitendfullscreen", function(){
    videoExitedFullscreen(video);
}, false);

(注意事件监听器是在视频本身上调用的,而不是像其他事件监听器那样在文档上调用)

在其中,我正在调用另一个函数来测试视频当前是否为全屏,并相应地进行更改 - 我将其创建为一个函数,以便我可以轻松地从各种浏览器所需的多个事件侦听器中调用它
(如果您不确定这些是什么,请参阅https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing)

//function to be run when full screen is closed
function videoExitedFullscreen(videoElement){

    //check if an element is currently full screen
    if(document.fullScreenElement || document.webkitIsFullScreen == true || document.mozFullScreen || document.msFullscreenElement ){

        //do whatever here if the video is now (just became) full screen

    } else {
        console.log('fullscreen was closed');

        //do whatever you want on fullscreen close, like pause or mute
    }
}

Answer 2

监听事件fulscreenchange并检查isFullscreen()。

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>

<script>
  videojs('my_video_1').ready(function(){
    var player = this;
    player.on('fullscreenchange', function(){
      if(!player.isFullscreen()) {
        alert('Exited fullscreen');
      }
    });
  });
</script>