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

ael*_*ron 15 video html5 mobile-safari html5-video ios

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

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

以下是HTMLVideoElement类的Safari API链接:

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

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

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

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

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

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

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

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

ael*_*ron 37

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

我正在寻找的事件是:webkitbeginfullscreenwebkitendfullscreen

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

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

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

  • 在 Chrome 上,检查 `document.getElementById('videoElement').webkitDisplayingFullscreen` ,要监听的事件是 `webkitfullscreenchange` ,就像在 Safari 上一样。 (2认同)
  • 不推荐使用`webkitDisplayingFullscreen`. (2认同)