如何检测iOS离开全屏视频? [英] How to detect iOS leaving fullscreen video?

问题描述

如何检测iOS上的视频何时关闭?我正在运行videojs，它将HTML5视频作为本机视频播放器启动.为了做出正确的反应，我想在关闭本机播放器时得到一个事件.

How can I detect when a video on iOS is closed? I am running videojs which launches HTML5 videos as native video players. In order to react properly, I want to get an event when the native player is closed.

这里有几个与此类似的问题，但没有一个答案起作用.

There are several similar questions to this one around here, but non of the answers work.

我尝试过的第一个解决方案:

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

解决方案于2012年在此处提出:这种方法对我不起作用.该事件不会被触发(至少在iOS模拟器中)，我对此无能为力.

This method doesn't work for me. The event doesn't get fired (at least in iOS simulator) and I can't do anything with it.

我尝试过的第二个解决方案

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

甚至早于2012年在这里提出了解决方案:

此方法也不起作用，视频元素没有此属性(至少在iOS模拟器中).顺便说一句，不建议使用此方法.

This method also doesn't work, the video element does not have this attribute (at least in iOS simulator). BTW, this method is deprecated.

有人知道如何获得有关iOS如今离开全屏状态的通知吗?

Does anyone have an idea about how to get notified about iOS leaving fullscreen nowadays?

推荐答案

到目前为止，您可能已经找到了解决方案，但是在iPad和iPhone上却遇到了同样的问题.我发现没有fullscreenchange事件在这些设备上触发，尽管在其他设备上也能正常工作.

You may well have found your solution by now, but I was having the same issue on iPad and iPhone. I found that none of the fullscreenchange events were firing on these devices, though it worked fine elsewhere.

我在 http://html5wood.com/上找到了解决方案html5-video-fullscreen-change-events-on-ipad/，但我也将在此处解释其完整性:

I found my solution at http://html5wood.com/html5-video-fullscreen-change-events-on-ipad/, but I'll explain here for completeness too:

除了进行全屏更改的各种其他事件监听器之外，我还添加了

In addition to the various other event listeners for fullscreenchange, I added

var video = document.getElementById(myVideo);

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

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

(Note that the event listener is called on the video itself, not on the document like the other event listeners could be)

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

Within that, I'm calling another function that tests if the video is currently fullscreen or not, and makes changes accordingly - I created this as a function so I could easily call it from within each of the multiple event listeners needed for various browsers
(if you're not sure what these are see 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
    }
}

这篇关于如何检测iOS离开全屏视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！