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

Question

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

如何判断视频是“内联”播放还是在新应用中启动？如果内联显示，我将隐藏启动图像，如果它在新应用中启动，我将不隐藏。

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

我正在使用 jQuery，以防万一。

Answer 1

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

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

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

我对 Android 不太熟悉，但是有一个事件，webkitfullscreenchange，当它进入全屏时，您可以收听它。不知道这是否适用于移动设备，我认为它不适用于 iOS。

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