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

Question

HTML5的<video>标签在Safari移动设备（iOS）上为用户提供了一个切换全屏模式的按钮。

我想捕获并处理这个用户操作，但似乎当按下按钮并播放器进入全屏模式时，它不会触发事件。

以下是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属性，但从内存管理的角度来看，这似乎是一件不好的事情。

有人能提出更好的解决方案吗？

- aeldron

---

除了我之前说的，Safari文档提到了事件webkitfullscreenchange，但在iPad上似乎无法正常工作。http://stackoverflow.com/questions/8450152/webkitfullscreenchange-event-not-firing-on-ipad - aeldron

Answer 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上测试），相同的事件似乎不起作用。

感谢苹果公司的不一致性和花费的时间。

- aeldron

---

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

在Chrome中检查 document.getElementById('videoElement').webkitDisplayingFullscreen，要监听的事件是 webkitfullscreenchange，就像在Safari中一样。 - vhanla

webkitDisplayingFullscreen已被弃用。 - okcoker

给你！严肃地说，Safari怎么回事啊，让我浪费了2个多小时加上15个StackOverflow的问题，直到我来到这里。兄弟，干杯！！ - ncubica

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

请在这里发送文档链接，好吗？ - Ajeet Eppakayala