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

Question

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

如何判断视频是“内嵌”播放还是启动到新应用中？如果它以内联方式显示，我将隐藏启动图像，如果它被启动到新应用程序中，我将不会。

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

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

Answer 1

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

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

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

我对Android不太熟悉，但有一个事件，webkitfullscreenchange，当你全屏显示时，你可能会听到它。不知道这是否适用于移动设备，我不相信它适用于iOS。

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

Answer 2

检查oncanplay。对于内联播放的视频，它似乎预设为null。

var playsInline = typeof document.getElementByID('myVid')['oncanplay'] !== 'undefined';

或作为一种功能

function playsInLine(vidId) {
    return typeof document.getElementByID(vidId)['oncanplay'] !== 'undefined';
}

警告：此方法可能无法在所有设备上的所有浏览器中提供正确的输出，并且由于将来的更改，它也可能会产生不需要的结果。但在撰写本文时，这对我来说无处不在（Windows：Chrome 42，IE11，FF36，Opera 29，Safari。Android：Chrome。iPad和iPhone 4S：Safari）