移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮挡。后来，这个问题在iOS下得到了解决。但是对Android的大部分浏览器来说，问题仍然存在。X5是腾讯基于Webkit开发的浏览器内核，应用于Android端的微信、QQ、QQ浏览器等应用。它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。
简单使用
只要给普通的video元素加上X5的自定义属性 x5-video-player-type ，就可以调用同层播放器。示例代码如下：
body {margin: 0;background: #000;
}
.video {width: 100%;
}
复制代码<div class="player"><video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5"><source src="video.mp4" /></video>
</div>
复制代码点击播放后，页面会瞬间拉伸（体验有点差），然后就进入了全屏状态，视频默认在中间位置：
调整位置
在全屏状态下，调整视频位置的通用做法是：把video元素的尺寸设成满屏，再通过 object-position 样式属性控制视频内容的位置。相关代码如下：
.fullscreen .video {object-position: center top;
}
复制代码var player = document.getElementById('video');
var isFullScreen;// 进入全屏，设置状态
player.addEventListener('x5videoenterfullscreen', function() {isFullScreen = true;// 在body上添加样式类以控制全屏状态下的页面布局document.body.classList.add('fullscreen');
}, false);// 退出全屏时，清空状态
player.addEventListener('x5videoexitfullscreen', function() {isFullScreen = false;document.body.classList.remove('fullscreen');player.style.width = player.style.height = '';
}, false);// 同层播放器进入全屏状态会导致窗口resize，但退出全屏不会
window.addEventListener('resize', function() {if (isFullScreen) {// 设为屏幕尺寸player.style.width = window.screen.width + 'px';player.style.height = window.screen.height + 'px';}
}, false);
复制代码效果如下方左图所示，可见，此时视频距离顶部尚有一些距离。这个问题与 x5-video-player-fullscreen 属性有关。如果不声明这个属性，原标题栏的占位不会分配给页面，而是平均分成上下两块，分别位于窗口顶部和底部。因此，视频无法顶到最上方。
补充 x5-video-player-fullscreen 属性后，问题就解决了（上方右图）：
<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true"><source src="video.mp4" />
</video>
复制代码大家还可以发现，顶部有一层黑色渐变（上图不太明显，可以看下文的图）以及两个按钮。据官方文档所述，这些都是无法移除的。
全屏状态下的布局
实际业务中，页面多半不会只有一个视频这么简单，下面就开始添加其他页面元素（请行引入rem布局所需的脚本）。首先是在视频之前加上标题栏：
.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;
}
复制代码从下方左图可见，标题栏确实可以挡住视频了。
此时视频内容被遮挡，所以要将其下移（上方右图）：
.fullscreen .video {object-position: center 1.14rem;
}
复制代码接下来在视频之后添加其他页面元素，常规做法是限制视频区域高度，再进行后面的布局。但由于video元素本身在全屏状态下的宽高必须设成满屏，所以只能通过它的父元素（div.player）限制它的占位：
.player {height: 4.22rem;
}
.fullscreen .player {/* 全屏状态下重设高度，勿忘 */height: 5.36rem; /* 4.22 + 1.14 */
}
.video {width: 100%;height: 100%;
}
.main {box-sizing: border-box;padding: 0.3rem;height: 5rem;background: #fff;
}
复制代码<header id="header" class="header">...</header>
<div class="player">...</div>
<div id="main" class="main">这里是其他内容</div>
复制代码而div.main本身是不需要做任何特殊处理的。然而，此时又出现了一个新问题：进入全屏状态后，视频控制栏不见了。原因是，video元素的高度为屏幕高度，控制栏位于屏幕最底端，而div.player又限制了高度，导致video元素超出的区域被隐藏，自然就看不到控制栏了。幸好，我们还可以通过伪元素选择器修改控制栏的样式：
.fullscreen .player {position: relative;height: 5.36rem;
}
.fullscreen .video::-webkit-media-controls {position: absolute;bottom: 0;
}
复制代码通过使控制栏相对于div.player定位，就可以让它回到视频画面的底端了。最终效果如下图所示：
综上所述，在全屏状态下，video元素之前的元素需要做布局调整，而在其后的元素则不需要。
页面滚动
如果页面有滚动条，进入全屏状态后，是否还可以滚动呢？
笔者撰写本文第一版（2017年中）的时候，全屏状态下的页面滚动会变成抖动，效果非常糟糕，而目前则是滚不了了。
所以，如果页面内容确实较多，只能使用元素内滚动了。
控制栏的坑
不得不说，原生控制栏的bug非常严重。
Bug 1：播放某些格式的视频时，进度条会出现错乱，即使退出全屏模式也还是错乱。
Bug 2：控制栏的全屏按钮在某些情况（具体规律尚未查明）下无效。
Bug 3：整个控制栏在某些情况（具体规律尚未查明）下无法调出。
以上三个bug非必现。但为了躲开这些坑，建议屏蔽原生控制栏，自行开发一个控制栏。
视频全屏的实现
上一节提到，原生控制栏的全屏按钮在某些情况下无效，这样一来就必须想其他方法去实现视频的全屏了，这里面最关键就是video元素的 x5-video-orientation 属性。它决定了同层播放器进入全屏状态后，当前窗口是横屏还是竖屏（前文的所有描述中，都是竖屏的情况）。并且，它是可以动态设置的。
如果把 x5-video-orientation 设成横屏，再把页面上的其他元素隐藏掉，就跟全屏无异了。具体实现如下：
var isLandscape;// 点击其他内容区域，进入全屏
var main = document.getElementById('main');
main.addEventListener('click', function() {// 同层播放器进入全屏状态之后，才能让视频全屏if (!isFullScreen) { return; }// 修改 x5-video-orientationplayer.setAttribute('x5-video-orientation', 'landscape');isLandscape = true;
}, false);// 检测窗口方向改变，修改布局
window.addEventListener('orientationchange', function() {if (isLandscape) {document.body.classList.add('landscape');var width = window.screen.width;var height = window.screen.height;player.style.width = width + 'px';player.style.height = height + 'px';}
}, false);
复制代码.landscape .header { display: none; }
.landscape .video { object-position: center center; }
.landscape .main { display: none; }
复制代码要强调的是，从修改 x5-video-orientation 到窗口方向改变，需要一定的时间才能完成。因此，不要在修改之后马上调整布局，而是要监听 window 的 orientationchange 事件，在事件回调中调整布局。此外，还要在退出全屏时，清空相关状态：
player.addEventListener('x5videoexitfullscreen', function() {isFullScreen = false;isLandscape = false;document.body.classList.remove('fullscreen', 'landscape');player.style.width = player.style.height = '';
}, false);
复制代码最终效果如下（顶部的阴影和两个按钮仍然无法干掉）：
后记
本文第一版写于2017年6月，当时刚接触同层播放器，所以文章内容只能算是一份试用报告。经过一年多的项目实践之后，有些旧问题找到了更好的解决方案，还发现并解决了一些新问题，而同层播放器本身也有一些变化，于是在2018年11月进行修订，发布第二版。
本文同时发布于作者个人博客： mrluo.life/article/det…
