關於H5頁面在微信瀏覽器中音視頻播放的問題

Android 上，由於各個軟件使用的瀏覽器渲染引擎不同，因此視頻播放的效果差別也很大，這裏主要以微信爲主。微信使用的是騰訊瀏覽器自帶的X5內核。

而iOS是不容許使用第三方瀏覽器內核的，就是Google Chrome也是用的系統內建的Webkit瀏覽器內核 (就是WebView了)，APP 都是使用的系統自帶的瀏覽器進行頁面渲染,因此IOS的微信瀏覽器是Chrome的webkit內核。

這就致使H5頁面在android和iOS微信中的部分表現差別，但因爲X5內核是騰訊基於開源Webkit優化的瀏覽器渲染引擎，因此除了對video標籤的挾持，和下載頁跳轉被騰訊應用寶挾持外，其餘表現上尚未遇到特別折磨人的差異。

1.視頻播放自動全屏問題

這個問題在iOS和安卓下都有，瀏覽器默認全屏播放視頻，解決辦法很簡單，給video加如下屬性就能夠解決：

playsinline="true"
webkit-playsinline="true"  //webkit內核
x5-playsinline="true" //X5內核

2.音視頻自動播放問題

在最新版的Chrome瀏覽器（以及全部以Chromium爲內核的瀏覽器）中，已再也不容許自動播放音頻和視頻。就算你爲video或audio標籤設置了autoplay屬性也同樣不能自動播放。

<video autoplay></video>

若是用 javascript 代碼顯式調用play方法，控制檯會看到以下異常：Uncaught (in promise) DOMException。

這是由於，Chrome只容許用戶主動對網頁進行主動觸發後纔可自動播放音頻和視頻。

解決辦法：利用微信提供的js API WeixinJSBridge

var video = document.getElementById("video");
if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        video.play();
    }, false);
} else {
    document.addEventListener("WeixinJSBridgeReady", function () {
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            video.play();
        });
    }, false);
}
video.play();

3.android下的視頻同層播放問題

H5頁面分享到微信上播放視頻，最大的坑就是在Android手機上，X5瀏覽器會劫持Video標籤用騰訊播放器彈出全屏播放，處於最上層，覆蓋DOM元素，更可惡的是播放完畢時，會出現不少騰訊的廣告視頻。

其實上面提到的`x5-playsinline`屬性也能一部分解決這個問題，但在自定義視頻樣式等狀況下會致使視頻尺寸、樣式等各類各樣的問題，其實騰訊瀏覽器提供了同層播放的解決辦法，文檔請戳：【https://x5.tencent.com/tbs/guide/video.html】

同層播放器的使用方式跟普通的video元素差異不大，只是須要加上兩個X5的自定義屬性：「x5-video-player-type」和「x5-video-player-fullscreen」。

<video src="http://xxx.mp4" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true"
    x5-video-orientation="portrait"
/>

屬性說明：

  `x5-video-player-type="h5"` 聲明啓用同層H5播放器

  `x5-video-player-fullscreen` 是否全屏播放

  `x5-video-orientation` 播放控制橫豎屏， landscape 橫屏, portraint豎屏，默認豎屏（此屬性只在聲明瞭x5-video-player-type=」h5」狀況下生效）

 

有些狀況下可能還會出現視頻全屏播放有黑邊的問題

解決辦法：

`object-fit: cover` 這是一個css3屬性，cover的意思是劇中填滿並裁剪，它有一個特性，保證替換內容尺寸必定大於容器尺寸，而且寬度和高度至少有一個和容器一致，因此這個方法可能會致使視頻內容展現不全。

官方對全屏播放的建議：

1. 監聽resize事件實現自適應視口大小變化，視頻播放時會調整視口大小

```javascript

  window.onresize = function(){

   video.style.width = window.innerWidth + "px";

   video.style.height = window.innerHeight + "px";

  }

   ```

2. 在視頻播放期間的交互，彈框，字幕在視頻視頻區域中，不要在視頻區域外

3. 對於直播類全屏視頻，最好不要在最頂部放交互性元素

 

4.後臺切出自動中止播放音樂

在微信中打開一個自動播放音樂的H5頁面，有一個容易忽略的問題，就是在不退出頁面的狀況下，後臺切出微信時，頁面的音樂仍在播放，這樣用戶體驗就比較差。試了一下，播放中的視頻在頁面切出時會自動中止播放，音樂則不會，須要手動處理。而在Android中騰訊X5瀏覽器處理的就比較完善了，播放中的音視頻在切出後臺時會中止播放而且切回頁面後自動續播。

解決辦法：

HTML5新提供的API：visibilitychange

 

顧名思義這是一個頁面可見性API，瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件，對應的能夠經過Document.visibilityState 只讀屬性來獲取當前標籤頁在瀏覽器中的激活狀態：

visible: 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。
hidden : 頁面內容對用戶不可見。 在實際中，這意味着文檔能夠是一個後臺標籤，或是最小化窗口的一部分，或是在操做系統鎖屏激活的狀態下。
prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當作隱藏). 文檔可能初始狀態爲prerender，但毫不會從其它值轉爲該值。 註釋：瀏覽器支持是可選的。
unloaded : 頁面正在從內存中卸載。 註釋：瀏覽器支持是可選的。

因此要實現後臺切出時中止播放音樂經過監聽visibilitychange事件就能實現啦：

document.addEventListener('visibilitychange', function () {              
  // 用戶離開了當前頁面
  if (document.visibilityState === 'hidden') { //... } // 用戶打開或回到頁面 if (document.visibilityState === 'visible') { //... }
});
//或者

document.addEventListener("visibilitychange", (e) => {

  if (e.hidden) {  
     //...
  } else { 
     //...               
  }

})