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

Question

如何检测 iOS 上的视频何时关闭？我正在运行 videojs，它将 HTML5 视频作为本地视频播放器启动。为了做出正确的 react ，我想在 native 播放器关闭时获得一个事件。

这里有几个与此类似的问题，但没有一个答案有效。

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

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

解决方案于 2012 年在此处提出:How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

这个方法对我不起作用。该事件不会被触发(至少在 iOS 模拟器中)，我无法用它做任何事情。

我尝试的第二种解决方案

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

早在 2012 年就提出了解决方案:Is there an "onClose" event for the fullscreen video player on iPhone?

这个方法也不行，video元素没有这个属性(至少iOS模拟器是这样)。顺便说一句，此方法已弃用。

现在有没有人知道如何在 iOS 离开全屏时收到通知？

Answer 1

您现在可能已经找到了解决方案，但我在 iPad 和 iPhone 上遇到了同样的问题。我发现在这些设备上没有触发任何 fullscreenchange 事件，尽管它在其他地方运行良好。

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

除了 fullscreenchange 的各种其他事件监听器之外，我还添加了

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
    }
}