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

发布时间：2020-12-14 22:47:35 所属栏目：资源来源：网络整理

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

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

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

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

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

最佳答案

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

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

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

我对Android不太熟悉,但有一个事件,webkitfullscreenchange,你可以听到它全屏时接听.不知道这是否适用于移动设备,我不相信它适用于iOS.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!