走進安卓的重災區——video(微信X5瀏覽器)

html5的video已經出來好久了。在ios上使用基本上沒什麼毛病，可是安卓下就是一個重災區了，各類體驗差。這幾天搞了安卓的兼容，簡直是要吐血。因此特地總結了一些強勢的坑點。

經常使用的一些屬性和方法

video.error // null正常
video.error.code // 1用戶終止 2網絡錯誤 3解碼錯誤 4URL無效
video.currentTime // 當前播放的位置，賦值可改變位置
video.duration // 當前資源長度，流返回無限
video.paused // 是否暫停
video.ended // 是否結束
video.autoPlay // 是否自動播放
loadstart // 客戶端開始請求數據
error // 請求數據時遇到錯誤（能夠經過上一頁的屬性video.error.code查看具體錯誤緣由）
play // 開始播放時觸發
pause // 暫停時觸發
loadeddata // 數據已加載
waiting // 等待數據，並不是錯誤
playing // play觸發後執行一次
canplaythrough // 能夠播放，已加載好
timeupdate // 播放時間改變
durationchange // 資源長度改變
...
複製代碼

坑（本次主要是在微信X5瀏覽器中的測試，其餘安卓瀏覽器下表現不必定一致）

自動播放

在ios上會自動全屏播放，須要在video標籤上設置一個屬性 webkit-playsinline，ios10及以上版本屬性名改爲 playsinline。安卓上，沒法自動播放，必須手動觸發視頻的播放。調用任何方法都沒用，聽說這個爲了幫用戶省流量而設定的。可是安卓在首次觸發以後，再次觸發能夠經過調用 .play 來觸發播放視頻。所以作兼容的時候能夠設一個判斷是否首次播放的標誌來處理。

默認樣式

安卓下，不能自動播放，所以視頻在播放前會帶有視頻的默認白色加圓圈播放按鈕且背景是純黑色，能夠說是很是醜陋了。爲了好點的用戶體驗就是能夠在視頻的最上層覆蓋一張引導用戶點擊播放視頻的引導圖，這樣既不醜陋又讓用戶知道這裏須要點一下才有東西出現。個人作法是增長一個手指引導圖，而後讓該元素可穿透(即設置 pointer-events:none; 讓其不會成爲任何鼠標事件的target)，這樣點擊元素的時候就至關於點擊了視頻播放。而後監聽 playing 事件，若是視頻開始播放了則把引導圖隱藏。具體以下：

<div class="entry_video" id="entry_video">
  <video class="entry_video_con" id="video" webkit-playsinline playsinline src="//wq.360buyimg.com/fd/h5/1707/entryvideo/images/meirenyu_7f7e46da.mp4" autoplay="true"></video>
  <div class="guide" style="width: 100%;height: 100%;top: 0;left:0;position: absolute;pointer-events:none;">
    <img src="//img11.360buyimg.com/jdphoto/s750x1334_jfs/t5668/219/7883436652/42409/2a1e4cc0/5976a71bN212dfa7b.png" alt="" style="width:100%;height:100%;pointer-events:none;">
  </div>
</div>

vi.addEventListener('playing',function(){
     $('.guide').hide();
})
複製代碼

全屏播放

若頁面中沒有其餘內容，只是播放一個視頻的話，這個問題很好處理。設置webkit-playsinline，若是是在X5內核瀏覽器的話，設置 x5-video-player-type="h5" x5-video-player-fullscreen="true"。那麼問題來了，若是頁面上不僅有視頻，還有其餘內容呢，例如視頻是在一個彈出層中。這樣設置的話，頁面原有內容會有一個1s左右的很是明顯拉伸過程，這個拉伸過程就是爲全屏播放視頻作準備的。可是這樣的體驗能夠說是很是糟糕了。因而這種狀況下，必須捨棄設置全屏播放了，可是在X5瀏覽器非全屏播放模式下，安卓會在視頻頁面右上角自動生成一個全屏按鈕，這個怎麼都去不掉。若用戶點擊了進入全屏模式，視頻播放完畢並不會停留在視頻最後一幀，而是出現騰訊的一些視頻推送，你懂的。這個時候退出了全屏播放的話，視頻會自動隱藏，因此最好作一張視頻底圖，否則就尷尬了。

x5下檢測全屏

vi.addEventListener("x5videoenterfullscreen", function(){
     //進入全屏 
});  
vi.addEventListener("x5videoexitfullscreen", function(){                          
     //退出全屏 
});
複製代碼

用 video.addEventListener("x5videoexitfullscreen", function(){….}); 能夠檢測到視頻何時退出了全屏，可是若在這個監聽到退出以後隱藏整個視頻，則再次觸發播放視頻事件失效。且在這個監聽中直接調用 .play 方法並不能使視頻從新播放。也就是說在檢測過程當中不能對視頻進行一些隱藏，刪除的操做。能夠說，這檢測也沒什麼意義了。

詭異的坑

安卓下，如果搖一搖在彈出層播放視頻，若彈出層中有外鏈，點擊了跳轉，再返回，這個時候 video 會有一個詭異的bug，具體表現爲返回後第一次能正常觸發，第二次以後觸發都直接播到視頻最後一幀，設置 currentTime、start 爲0再播放，或者先 pause 再 play 都沒有用，必須銷燬重建。  

區分設備

因爲video在ios下表現良好，因此作兼容的時候，能夠經過 userAgent 來作分別作處理。如：

var vi = document.getElementsByTagName('video')[0];
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') <= -1){
   shakeWrap.show();
   if(!firstVideoLoad){
      vi.currentTime = 0;
      vi.start = 0;
      vi.play();
   }
   vi.addEventListener('playing',function(){
       firstVideoLoad = false;
       $('.guide').hide();
   })         
 }else{
      vi.play();
 }
}
複製代碼

微信固定入口的一些奇特bug

1. 必需要等到微信的jsbridge ready了才能觸發.play，不然不會自動執行。

document.addEventListener("WeixinJSBridgeReady", function() {  
  $("#video")[0].play();  
});
複製代碼

2. 在固定入口內，且 jsbridge ready 了，若是使用搖一搖，也沒法觸發 .play。須要在搖一搖以前預先加載以下：

document.addEventListener("WeixinJSBridgeReady", function() {
  var vi = document.getElementsByTagName('video')[0];
  vi.load(); 
  vi.pause(); 
  window.addEventListener('devicemotion', deviceMotionHandler, false);
});
複製代碼

3. 微信固定入口在沒有使用jsbridge，而是經過點擊來播放的點擊事件，只能是click事情，不能是touchstart事件。

最後

• 這是一篇以前寫的博客，這裏是遷移了過來～～
• 瞭解更多內容，歡迎關注個人blog, 給我個star～~
• 以爲內容有幫助能夠關注下個人公衆號 「前端Q」，一塊兒學習成長～～