如何确定 HTML5 视频播放器何时在 iOS / iPad 上进入全屏模式？

Posted 2023-05-07

【中文标题】如何确定 HTML5 视频播放器何时在 iOS / iPad 上进入全屏模式？

【英文标题】：How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

【发布时间】：2012-02-24 01:54:24

【问题描述】：

html5 <video> 标记为用户提供了一个按钮，用于在移动设备 (ios) 的 Safari 上打开和关闭全屏模式。

我想捕捉并处理这个用户操作，但是当按下按钮并且玩家进入全屏模式时它似乎没有引发事件。

这里是 HTMLVideoElement 类的 Safari API 的链接：

https://developer.apple.com/documentation/webkitjs/htmlvideoelement

我们可以在 javascript 中轻松找出视频何时暂停播放，如下所示：

function onload()

  var player = document.getElementsByTagName("video")[0];
  player.addEventListener('play',videoPlayHandler,false);
  player.addEventListener('pause',videoPauseHandler,false);

但是，当视频进入全屏模式时，他们似乎没有任何事件。

我们可以通过调用 webkitEnterFullscreen() 来强制视频进入全屏模式以响应用户操作，但这对我没有帮助。我需要知道用户何时点击全屏按钮。

隐藏控件并用我自己的自定义控件替换它们听起来像是一个非常冗长的解决方案。

我能想到的另一个选择是设置一个计时事件，不断检查 webkitDisplayingFullscreen 属性，但就内存管理而言，这样做感觉很糟糕。

谁能提出更好的解决方案？

【问题讨论】：

除我上面所说的之外，Safari 文档还提到了事件 webkitfullscreenchange，但它似乎不适用于 iPad。 ***.com/questions/8450152/…

【参考方案1】：

在一位朋友的闲逛之后，终于给我指明了正确的方向。

我正在寻找的事件是：webkitbeginfullscreen 和 webkitendfullscreen

var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

当用户点击 iPad 版 Safari 上的全屏按钮时，我可以安全地捕捉到这一点。有趣的是，相同的事件似乎不适用于 iMac 上的 Safari（在 5.1.2 版上测试）。

感谢 Apple 的不一致和浪费时间。

【讨论】：

在桌面 Safari 上，使用“webkitfullscreenchange”事件，并在监听器中检查document.webkitIsFullScreen。

在 Chrome 上检查 document.getElementById('videoElement').webkitDisplayingFullscreen 并且要监听的事件是 webkitfullscreenchange 就像在 Safari 上一样。

webkitDisplayingFullscreen 已弃用。

??? 为你服务！！！，真的 wtf 与 safari，让我失去了 2 小时加上 15 个 ***s 问题，直到我到达这里。干杯兄弟！！

你知道如何在全屏模式下暂停播放吗？谢谢