1、 監聽video進入/退出全屏播放

IOS和Android有相容問題

1. IOS中（IOS 微信瀏覽器是Chrome的核心）

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

2. 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同樣生效。