起因
写这篇文章是因为在做微信端视频观看时出现了很多意料之外的问题，这些问题网上也有很多人碰到，也有一些解决方法，但这些方法，有的不全，有的已经过时。
安卓微信里播放视频通常碰到问题是会自动全屏，像下面这样。造成这种结果的原因是因为在安卓端，微信会使用腾讯开发的x5内核(如果安装了x5内核的话)来替代安卓手机系统自带的浏览器内核，所以在微信中视频播放和在系统自带的浏览器或者手机Chrome浏览器中表现是不同的。
而iOS微信中使用的是Safari浏览器来渲染，问题基本可以忽略。
x5内核和tbs
上面提到了x5内核，那么x5内核与webkit内核有什么区别呢？x5内核是腾讯微移动端开发的一个浏览器内核，这个内核通常比系统自带的webkit内核兼容性(JavaScript/CSS)要好一点，并且添加了一些其他功能，如文档查看、视频小窗播放、支持更多视频格式等，这一系列的功能称之为腾讯浏览服务(tbs)。开了一扇门就会关上一扇窗，在增加这些功能的同时，必定会埋下许多坑，而这些坑就需要开发者来填。今天说的是视频播放的坑。
x5内核的安装及启用与禁用
- 安装
一般来说，安装了QQ浏览器就会安装x5内核，安装后默认启用。
对于开发人员来说，可以通过扫描下面的二维码(二维码地址为：debugtbs.qq.com/)安装
点击第三个格子进行安装
- 启用与禁用
安装完成后可以点击第十二个格子来选择是否禁用tbs。
x5内核的userAgent
当用户使用安卓微信访问一个网页时，用户可能也不知道自己使用的什么内核的，简单的判断方法是下拉网页看看是否有"QQ浏览器x5内核"，如果有说明使用的是x5内核，如果没有或者无法下拉出提示说明使用的是系统浏览器内核。
x5在userAgent上与其它内核不同，因此可以通过判断userAgent来判断当前是否是x5内核。
- 在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持
userAgent示例
Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN
复制代码所以可以通过JavaScript来判断，代码如下：
var userAgent = navigator.userAgent
function userAgentMatch(regex) {
return userAgent.match(regex) !== null
}
function isAndroid() {
return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}
function isTbsX5() {
var ua = userAgent
var res
if (!isAndroid(ua)) {
return false
}
res = /tbs\/(\d+) /gi.exec(ua)
if (res) {
return (res[1] || '') > '036849'
}
return false
}
复制代码- 在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持
userAgent示例
UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
复制代码通过JavaScript来判断如下，代码如下：
var userAgent = navigator.userAgent
function userAgentMatch(regex) {
return userAgent.match(regex) !== null
}
function isAndroid() {
return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}
function isQQX5() {
var ua = userAgent
var res
if (!isAndroid(ua)) {
return false
}
res = /MQQBrowser\/([\d+.]+) /gi.exec(ua)
if (res) {
return +(res[1] || '') >= 7.1
}
return false
}
复制代码所以判断x5浏览器的代码就可以写成下面这样：
var userAgent = navigator.userAgent
function userAgentMatch(regex) {
return userAgent.match(regex) !== null
}
function isAndroid() {
return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}
function isTbsX5() {
var ua = userAgent
var res
if (!isAndroid(ua)) {
return false
}
res = /tbs\/(\d+) /gi.exec(ua)
if (res) {
return (res[1] || '') > '036849'
}
return false
}
function isQQX5() {
var ua = userAgent
var res
if (!isAndroid(ua)) {
return false
}
res = /MQQBrowser\/([\d+.]+) /gi.exec(ua)
if (res) {
return +(res[1] || '') >= 7.1
}
return false
}
function isX5() {
return isTbsX5() || isQQX5()
}
复制代码x5内核下两种播放模式
在知道如何区分x5内核后，接下来说x5内核里视频播放的三种模式：
1. 默认模式
这是在不对video标签处理的情况下的默认表现，这种模式的特点是，点击播放就竖屏全屏，视频位于页面的正中央，你自己播放器的控制栏会被去除，取而代之的是页面底部腾讯的播放器控制栏，控制栏最右面会有个横屏按钮，在视频播放完成后，会有腾讯提供的广告，广告暂时无法去除。
这种模式下播放，播放就全屏，也就是说在播放视频时，用户除了video标签，网页上的其他元素都看不到，也就无法在观看视频/直播的同时，进行聊天、打赏等互动了。这种模式体验很差，一般不推荐使用这种模式。
2. 同层模式
同层模式相对于默认模式，解决了默认模式下，视频自动全屏，无法与页面其他元素交互的问题。同层模式下，视频在播放时页面会触发resize事件，然后进度同层，进入同层后，顶部左边有一个”<”按钮，用于退出播放，顶部右边有一个“…”按钮，用于分享和小窗播放。这种模式下，
同层模式有以下特点：
-
- 视频不处于最上层，但是视频的控制条(指video的controls属性生成的控制条)会消失。因为视频不处于最上层，所以可以放弹幕和自定义的控制条
-
- 页面的宽度为视频的宽度，如果视频的宽度小于屏幕宽度，那么页面两边会有黑边，且部分黑边部分应该显示的内容不显示
-
- 页面document无法滑动，也就是说，如果页面很长，下面的内容就看不到了
-
- div内如果overflow为scroll/auto还是可以滑动的，就像现在这个div
同层模式需要在video被添加到页面前带上x5-video-player-type, x5-video-player-fullscreen, x5-video-orientation，属性的具体值可以根据腾讯H5同层播放器接入规范来设置，一般如下：
<video
src="./exp.mp4"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
controls
></video>
复制代码// 如果是使用js创建，需要在video被添加到dom前设置好
var video = document.createElement('video')
video.setAttribute('controls', '')
video.setAttribute('x5-video-player-type', 'h5')
video.setAttribute('x5-video-player-fullscreen', 'true')
video.setAttribute('x5-video-orientation', 'portrait')
document.body.appendChild(video)
// video被添加到dom后设置不会生效
var video = document.createElement('video')
video.setAttribute('controls', '')
document.body.appendChild(video)
video.setAttribute('x5-video-player-type', 'h5')
video.setAttribute('x5-video-player-fullscreen', 'true')
video.setAttribute('x5-video-orientation', 'portrait')
复制代码除了需要设置属性外，还需要在视频播放时，video样式height值要大于或者等于屏幕高度才能达到效果。 具体可以查看下面的Demo及代码
3. inline模式
inline模式下，播放时始终位于网页的最顶层，可以理解为video标签的z-index被设置到无穷大。inline模式相对于同层模式来说，页面的宽度不受video的宽度限制，页面上方也不会有返回和设置按钮，大多数情况推荐使用这种模式。
要启用video模式，只要在video被添加到页面前设置好x5-playsinline即可，如下：
<video src="./exp.mp4" x5-playsinline="" controls></video>
复制代码总结
对于安卓微信来说，inline模式时最简单也是体验较好的，如果有弹幕等需求，就需要使用同层模式，但是使用同层模式需要非常小心的对video的样式进行控制。