HTML5 Video 在微信浏览器中播放问题

1、监听video进入/退出全屏播放

IOS和Android有兼容问题

IOS中（IOS 微信浏览器是Chrome的内核）

video.addEventListener('webkitbeginfullscreen', function() {    // 进入全屏
     video.play();
 })
 video.addEventListener('webkitendfullscreen', function() {   // 退出全屏
     video.pause();
 });

Android中（安卓微信浏览器是X5内核）

video.addEventListener('x5videoenterfullscreen', function() {    // 进入全屏
     video.play();
 })
 video.addEventListener('x5videoexitfullscreen', function() {   // 退出全屏
     video.pause();
 });

2、微信浏览器中video小窗播放

Video标签的属性：

<video
  class="videoBox" 
  src="video.m3u8" 
  poster="images.jpg"  // 视频封面
  preload   //
  webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  // IOS微信浏览器支持小窗内播放
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  // 启用同层H5播放器,是wechat安卓版特性
  x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
  x5-video-orientation="portraint" // 播放器的方向， landscape横屏，portraint竖屏，默认值为竖屏
  >
</video>

微信浏览器兼容问题：
ios微信浏览器是Chrome内核，相关属性都支持。而android微信浏览器是X5内核，对一些属性标签如playsinline 就不支持，所以默认始终全屏。
解决Android中video无法小窗播放的问题：启用同层H5播放器腾讯浏览服务

playsinline和webkit-playsinline：IOS的微信浏览其中生效，使视频播放时局域播放，不脱离文档流。
x5-video-player-type：启用H5同层播放器，是微信安卓版特有的属性，即视频在全屏播放时，div可以呈现在视频的上层。同层播放也叫做沉浸式播放，播放的时候看似全屏，但是已经去除了control和微信的导航栏，只留下’x’和’<'键。用CSS（.video{object-position: center top;}）将视频定位在最上层，制造出小窗播放的假象。
x5-video-orientation：声明播放器的方向，andscape横屏，portraint竖屏，默认值为竖屏。x5-video-orientation 这个属性需要x5-video-player-type开启H5模式。（同层播放下的div在css中要设置position: relative;）
x5-video-player-fullscreen：全屏设置，true支持全屏播放，false不支持全屏播放。

3、手动全屏播放

video.webkitEnterFullscreen(); //全屏播放

4、自动播放

Android始终不能自动播放。ios10后版本的safari和微信浏览器都不让视频和音频自动播放，但微信提供了一个WeixinJSBridgeReady事件可以实现视频自动播放。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

5、Android退出同层播放

退出X5播放器官网没有给出退出的方法，查阅资料找到一种可以实现的方法。给video标签设置video.style.display='none’样式，就退出X5了。监听退出通知再设置回来就好了。给video的父级标签设置display同样生效。