【贝尔查特科技】X5浏览器内核同层播放器试用报告

手机浏览器中的视频元素比较特殊。早期无论是在iOS还是Android的浏览器中，都是位于页面顶端，无法覆盖。后来这个问题在iOS下解决了，但是安卓浏览器的问题依然存在。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种特殊的视频元素“对等播放器”来解决遮罩问题。

同层播放器的用法和普通视频元素没有太大区别，只是需要增加两个X5自定义属性:“X5-视频-播放器-类型”和“X5-视频-播放器-全屏”。

让我们在同一个层播放器中嵌入一个测试页面:

点击播放后，视频元素占据全屏，视频部分默认显示在中央:

根据官方文件，只要修改视频元素的“object-position”属性，就可以修改视频部分的显示位置，但实际上视频元素的宽度和高度应该设置为屏幕的宽度和高度:

效果如下(右):

请注意，当将视频元素的高度设置为屏幕高度时，应该使用“window.screen.height”而不是“document”。documentelement。clientheight”，因为后者不包含导航条的高度，会导致无法充满屏幕(如上左图)。

在下面添加标题栏:

但点击播放进入全屏状态后，标题栏消失。由于同一层的玩家可以被覆盖，所以尝试绝对定位:

标题栏确实挡住了视频，但是有一个黑色的渐变和左右两个按钮(左下)。根据官方文件，这些是不能移除的。

接下来要做的就是将视频下移，让整体UI与进入全屏前保持一致(右上):

下一步是在视频元素后添加其他内容:

但是，进入全屏状态后，内容元素向上移动(左下)。

显然，这个元素的位置也应该下移标题栏的高度:

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

此时进入全屏状态后点击内容元素是没有反应的，因为视频元素占据了全屏，其层次高，挡住了内容元素。知道了问题，解决方法就简单了，提高主元素的层次就行了:

因为同一层玩家的全屏状态只能指定一个方向(默认竖屏)，所以竖屏玩完后还是会被强制。在这一点上，整体效果不太对:

因为横屏状态的宽度和高度正好与竖屏状态相反，所以恢复竖屏时UI异常。所以进入全屏的时候，要判断宽度和高度。如果宽度大于高度，请更换:

如果播放前页面有滚动条，可以全屏滚动吗？答案是确实可以滚动，但与其说是滚动不如说是抖动，具体效果可以自己试试。简而言之，进入全屏状态后，不要使用页面滚动，而要使用局部滚动。另外需要注意的是，因为级别提高了，如果内容元素过高，会遮挡视频的控制条。

最后一个问题是，在播放一些视频格式的时候，进度条会紊乱，甚至回到非全屏模式。

本文同时发表于作者个人博客:X5播放器试用报告|前端开发|希罗的博客。