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

问题描述

HTML5 标签为用户提供了一个按钮，用于在移动设备 (iOS) 的 Safari 上打开和关闭全屏模式.

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

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

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.

这是 HTMLVideoElement 类的 Safari API 的链接:

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

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

我们可以很容易地找出视频何时暂停或在 Javascript 中播放，如下所示:

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

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.

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

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.

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

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

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

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.

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

Can anyone suggest a better solution?

推荐答案

在一个朋友的折腾之后终于给我指明了正确的方向.

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

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

The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen

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

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

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).

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

Thanks Apple for their inconsistency and hours of wasted time.

这篇关于如何确定 HTML5 视频播放器何时在 iOS/iPad 上进入全屏模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！