如何检测HTML5视频是否会在内联播放。

Question

我有一个带有闪屏图片的HTML5视频。在桌面设备上，我希望点击闪屏图片使其消失并播放视频。在手机上，点击图片将使视频在一个单独的应用程序中播放，因此当用户点击返回按钮回到网页时，我希望闪屏图片仍然存在（至少在我的Android手机上，普通的视频组件非常丑陋）。

我该如何判断视频是否会“内联”播放还是启动一个新应用程序？如果它是内联显示，我将隐藏闪屏图片；如果它是启动一个新应用程序，我就不隐藏。

一种方法是嗅探用户代理来判断是否为手机。由于明显的原因，这不是一个好主意（可能会在新手机推出时出现问题，需要在数百个设备上进行测试）。 另一个可能性是在离开页面跳转到视频播放器或从视频播放器返回时捕获某种事件。但我不确定要捕获什么。 我考虑过的另一个可能性是设置一个计时器来检查视频组件的某些属性...看它是否正在播放...或其他什么东西。

我使用jQuery，如果有影响，请注意。

- mhenry1384

---

你有关于这个话题的任何发现吗？我从春天开始一直在搜索，但仍然渴望一个不需要UA-sniffing的解决方案。 - m90

我从未想出答案。对于我的问题，最终我只是不再担心移动设备上的启动图像在返回网页时没有出现，而且客户也没有抱怨。 - mhenry1384

谢谢回复。我仍在嗅探UA字符串...希望很快会有所发现。 - m90

Answer 1

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

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

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

对于Android，我不太熟悉，但是有一个事件webkitfullscreenchange，你可以尝试监听它以捕获全屏状态。我不确定它是否适用于移动设备，我认为它在iOS上不起作用。

我知道这是一个老问题，但我希望这可以帮助到某些人！

- Adrien Delessert

---

刚在iOS 6上尝试了一下，document.getElementById("myVideo").webkitDisplayingFullscreen返回false。这可能已经过时了。 - RobW

@RobW：我刚在iOS 6和beta 7上试了一下，一切都按预期工作。也许你的设置有其他问题？ - Adrien Delessert

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）都有效。

- Henrik Christensen