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

Posted 2023-05-08

【中文标题】如何检测iOS离开全屏视频？

【英文标题】：How to detect iOS leaving fullscreen video?

【发布时间】：2015-11-20 13:48:50

【问题描述】：

如何检测 ios 上的视频何时关闭？我正在运行 videojs，它将 html5 视频作为本机视频播放器启动。为了正确反应，我想在原生播放器关闭时得到一个事件。

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

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

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 离开全屏时收到通知？

【参考方案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
    

【讨论】：

自 01/2019 和 iOS12 起，webkitfullscreenchange 将在进入或退出全屏模式时触发：fullscreenchange 不会。答案中详述的检测方法仍然有效。

自 2020 年 6 月 11 日 iOS 13.1 起，webkitfullscreenchange 不会在文档或视频元素上触发。上面的答案是唯一有效的！我不敢相信这个答案在 4 年后仍然有效，Apple 仍然没有修复它。

【参考方案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"  >
  <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>

【讨论】：

遗憾的是，这也适用于非本地玩家。所以真的没有区别。此外，本地玩家可能不会触发fullscreentrigger - 但我明天会尝试。