Question

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 属性，但在内存管理方面这感觉很糟糕。

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

Answer 1

经过一番朋友的努力，我终于指出了正确的方向。

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

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

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

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

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

1 个答案: