如何检测html5视频是否将内联播放

Question

我有一个HTML5视频,顶部有一个启动图像.在桌面设备上,我想点击启动图像以使图像消失并播放视频.在手机上,单击图像将使视频在单独的应用程序中播放,因此当用户单击返回到网页时,我希望启动图像仍然存在(普通视频组件,至少在我的Android手机,非常难看).

如何判断视频是"内联"还是启动到新应用中？如果它以内联方式显示,我将隐藏启动图像,如果它被启动到一个新的应用程序,我不会.

一种方法是嗅探用户代理以查看它是否是电话.出于显而易见的原因,这不是一个好主意(当新手机出现时可能会破坏,必须在100多台设备上进行测试).另一种可能性是当我们离开页面跳转到视频播放器或从视频播放器返回时捕获某种事件.但我不知道该抓什么.我考虑过的另一种可能性是设置一个计时器来检查视频组件的某些属性......看看它是否正在播放......或其他什么.

我正在使用jQuery,以防万一.

Answer 1

在 iOS 上，您的视频元素将具有该webkitDisplayingFullscreen属性，因此您可以检查它并确定视频是内联还是全屏：

var videoFullscreenStatus = document.getElementById("myVideo").webkitDisplayingFullscreen;

当视频全屏播放时该属性为 true，否则为 false。因此，理论上，您可以在视频开始播放后立即检查这一点，并相应地设置海报图像。

我对 Android 不太熟悉，但是有一个事件 ，webkitfullscreenchange您可以在全屏显示时收听该事件。不知道这是否适用于移动设备，我不相信它适用于 iOS。

我知道这是一个老问题，但我希望这对某人有帮助！