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

The HTML5 tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).

HTML5标签为用户提供了一个按钮,用于在移动设备(iOS)的Safari上切换全屏模式。

I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.

我想捕获并处理此用户操作,但是当按下按钮并且播放器进入全屏模式时,它似乎不会引发事件。

Here is the link to the Safari API for the HTMLVideoElement class:

以下是HTMLVideoElement类的Safari API链接:

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

We can easily find out when the video is paused of played in Javascript, like this:

我们可以很容易地找到视频暂停播放时使用Javascript播放的内容,如下所示:

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

However they don't seem to have any events for when the video enters the full screen mode.

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

We can force the video into fullscreen mode in response to user action by calling the webkitEnterFullscreen(), but that doesn't help me. I need to know when the user taps on the fullscreen button.

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

Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.

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

Another option I can think of is to set a timing event, constantly checking for the webkitDisplayingFullscreen property, but that feels like a bad thing to do in terms of memory management.

我能想到的另一个选择是设置一个计时事件,不断检查webkitDisplayingFullscreen属性,但在内存管理方面这感觉是件坏事。

Can anyone suggest a better solution?

有谁能建议更好的解决方案?

1 个解决方案

#1

After much faffing around a friend finally pointed me in the right direction.

在经历了很多事情之后,一位朋友终于指出了我正确的方向。

The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen

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

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

With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same events don't seem to work for Safari on the iMac (tested on version 5.1.2).

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

Thanks Apple for their inconsistency and hours of wasted time.

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

#1