HTML5标签为用户提供了一个按钮,用于在移动设备(iOS)的Safari上切换全屏模式.
我想捕获并处理此用户操作,但是当按下按钮并且播放器进入全屏模式时,它似乎不会引发事件.
以下是HTMLVideoElement类的Safari API链接:
我们可以很容易地找出视频暂停播放的时间是用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属性,但在内存管理方面这感觉是件坏事.
有谁能建议更好的解决方案?
这是这个问题的延伸
根据我的研究,对于iPhone/iPad上的视频元素,同时按"完成"和"暂停"会触发"暂停"事件.因此,如果我在按下"完成"按钮时想要启动某些所需的网页行为,我需要监听"暂停"事件.
player = document.getElementById('videoplayer');
player.addEventListener("pause", function() {
//desired "done button" behavior defined here
}, false);
Run Code Online (Sandbox Code Playgroud)
根据Arv-ToolTwist对原始问题的回答,区分"完成"和"暂停"的方法是检查webkitDisplayingFullscreen布尔值(因为"完成"按钮退出全屏,布尔值将返回false).
player.addEventListener("pause", function() {
if(!player.webkitDisplayingFullscreen) {
//desired "done button" behavior defined here
}
}, false);
Run Code Online (Sandbox Code Playgroud)
然而,在用户在播放器处于全屏模式时暂停视频然后在视频暂停时按下"完成"的情况下,不启动"期望的完成按钮行为".
我的研究转向了小到没有这些信息,但我的假设是,无论是"暂停"事件没有得到触发第二次,或者被触发第二次之前,webkitDisplayingFullscreen布尔改变为"假".无论哪种方式,该设备可以分辨"完成"和"暂停"之间的差异(即使播放器已经暂停),所以我想知道