5

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

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

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

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

4

2 回答 2

4

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

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

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

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

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

于 2012-10-09T04:47:25.497 回答
0

检查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）

于 2015-04-29T14:18:55.617 回答