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