[贝聊科技]X5浏览器内核同层播放器试用报告

Posted 2023-03-18

参考技术A

移动端浏览器中的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异常。因此，进入全屏时要判断一下宽高，如果宽大于高，则将其交换：

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

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

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