X5同层播放器试用报告

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

简单使用

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

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

body {
    margin: 0;
    background: #000;
    font-size: 0.3rem;
}
.player {
    width: 100%;
    height: 4.22rem;
}
.player .video {
    width: 100%;
    height: 100%;
}
复制代码

<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
    <source src="video.mp4" />
</video>
复制代码

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

调整位置

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

.fullscreen .video {
    object-position: center top;
}
复制代码

var player = document.getElementById('video');
player.addEventListener('x5videoenterfullscreen', function() {
    // 设为屏幕尺寸
    player.style.width = window.screen.width + 'px';
    player.style.height = window.screen.height + 'px';
    // 在body上添加样式类以控制全屏下的展示
    document.body.classList.add('fullscreen');
});
player.addEventListener('x5videoexitfullscreen', function() {
    player.style.width = player.style.height = '';
    document.body.classList.remove('fullscreen');
}, false);
复制代码

效果如下（右图）：

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

全屏状态下的布局

下面加上标题栏：

.header {
    width: 100%;
    height: 1.14rem;
    line-height: 1.14rem;
    background: #fff;
    font-size: 0.36rem;
    text-align: center;
    color: #000;
}
复制代码

<header id="header" class="header">标题栏</header>
<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
        <source src="video.mp4" />
    </video>
</div>
复制代码

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

.fullscreen .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}
复制代码

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

接下来要做的是把视频下移，使整体UI与进入全屏前保持一致（上方右图）：

.fullscreen .player .video {
    object-position: center 1.14rem;
}
复制代码

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

.main {
    height: 5rem;
    background: #fff;
}
.main .inner {
    padding: 0.3rem;
}
复制代码

<header id="header" class="header">标题栏</header>
<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
        <source src="video.mp4" />
    </video>
</div>
<div id="main" class="main">
    <div class="inner">这里是其他内容</div>
</div>
复制代码

然而，进入全屏状态后，内容元素向上偏移了（下方左图）。

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

.fullscreen .main {
    margin-top: 1.14rem;
}
复制代码

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

var main = document.getElementById('main');
main.addEventListener('click', function() {
    this.querySelector('.inner').innerHTML = Date.now();
}, false);
复制代码

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

.fullscreen .main {
    position: relative;
}
复制代码

横屏状态下进入全屏

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

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

player.addEventListener('x5videoenterfullscreen', function() {
    var width = window.screen.width;
    var height = window.screen.height;
    if (width > height) {
        width = [height, height = width][0];
    }
    player.style.width = width + 'px';
    player.style.height = height + 'px';

    document.body.classList.add('fullscreen');
}, false);
复制代码

其他问题

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

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

总结

• 关于同层播放器的支持情况，官方文档有详细描述，最新的微信、QQ以及QQ浏览器都能支持，但是仅限Android平台。
• 虽然同层播放器可以解决遮盖video元素的问题，但这毕竟还是X5 Only的技术。如果页面要在非腾讯系的产品中打开，那就要注意处理兼容问题。
• 同层播放器之前的元素，要用绝对定位或固定定位才能展示出来；而其后的元素，只要往下偏移（播放器元素「object-position」指定的偏移）并且提高层级，就与未播放时无异了。

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