技术指南

X5内核,解决系统webview兼容性差、加载速度慢、功能缺陷等问题

解决一切令开发者们头疼的问题,让开发者快速而轻松地开启开发之旅

解决系统webview兼容性差、加载速度慢等问题
让开发者快速而轻松地开启开发之旅
技术指南 > X5同层播放器试用报告

X5同层播放器试用报告

作者:Heero.Luo

文章出处:https://zhuanlan.zhihu.com/p/27559167

移动端浏览器中的video元素是比较特别的,早期无论是在iOS还是Android的浏览器中,它都位于页面的最顶层,无法被遮盖。后来这个问题在iOS下得到了解决,但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎,它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。

简单使用

同层播放器的使用方式跟普通的video元素差别不大,只是需要加上两个X5的自定义属性:「x5-video-player-type」和「x5-video-player-fullscreen」。

下面做一个测试页面嵌入同层播放器:

点击播放后,video元素占全屏,视频部分默认居中显示:

调整位置

按照官方文档所述,只要修改video元素的「object-position」属性,就可以修改视频部分的显示位置,但实际上还要把video元素的宽高设成屏幕的宽高才行:

效果如下(右图):

注意把video元素的高设为屏幕高度时,要用「window.screen.height」而不能用「document.documentElement.clientHeight」,因为后者不包含导航栏高度,将会导致无法满屏(如上方左图所示)。

全屏状态下的布局

下面加上标题栏:

然而,点击播放进入全屏状态后,标题栏就消失不见了。既然同层播放器是可以被遮盖的,那就试试绝对定位吧:

标题栏确实遮挡住视频了,但是就多了一层黑色的渐变以及左右两个按钮(下方左图)。据官方文档所述,这些都是无法移除的。

接下来要做的是把视频下移,使整体UI与进入全屏前保持一致(上方右图):

下一步是在video元素后面添加其他内容:

然而,进入全屏状态后,内容元素向上偏移了(下方左图)。

明显地,该元素的位置也要下移标题栏的高度:

接下来尝试简单的点击事件响应:

此时进入全屏状态后点击内容元素是没有任何反应的,因为video元素占满屏,而它的层级偏高,把内容元素挡住了。知道问题之后,解决方案也很简单,只要把main元素的层级调高就好了:

横屏状态下进入全屏

因为同层播放器的全屏状态只能指定一个方向(默认为竖屏),所以播放后还是会强制竖屏。此时整体效果都不太对劲:

因为横屏状态的宽高与竖屏状态下的刚好相反,所以才导致恢复竖屏时的UI异常。因此,进入全屏时要判断一下宽高,如果宽大于高,则将其交换:

其他问题

如果播放前页面有滚动条,进入全屏状态下可以滚动吗?答案是确实可以滚动,但是与其叫滚动,不如叫抖动,具体效果可以自己尝试。总之进入全屏状态后就不要用页面的滚动了,而是用局部滚动。此外还应注意,因为调高了层级,如果内容元素太高,就会挡住视频的控制条。

最后一个问题是,播放某些格式的视频时,进度条会出现错乱,即使返回非全屏模式时也还是错乱。

总结

关于同层播放器的支持情况,官方文档有详细描述,最新的微信、QQ以及QQ浏览器都能支持,但是仅限Android平台。

虽然同层播放器可以解决遮盖video元素的问题,但这毕竟还是X5 Only的技术。如果页面要在非腾讯系的产品中打开,那就要注意处理兼容问题。

同层播放器之前的元素,要用绝对定位或固定定位才能展示出来;而其后的元素,只要往下偏移(播放器元素「object-position」指定的偏移)并且提高层级,就与未播放时无异了。

本文也发布在作者个人博客:X5同层播放器试用报告 | 前端开发 | Heero's Blog