開發微信H5視訊秀專案遇到的坑

?Allen發表於2018-05-18
H5

介紹

手頭上正好有個專案，需要做一個微信端H5視訊秀的一個專案，想想好像挺簡單的，由兩個視訊組成，播放完第一個視訊後點選按鈕繼而播放第二個視訊。好了，結果微信的坑TM的多

問題排查

自動全屏與播放控制元件條問題

這個其實不難，把下面的屬性都加上就可以實現了，具體解釋我也不在這裡說了，不懂的就百度下吧

    <video id="video" src="test.mp4"  webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow"  x5-video-orientation="portrait" 
    x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
複製程式碼

ios下很完美的播放不會自動全屏，設定好寬高就可以播放了 android下 會使用同層播放，也算是暫時解決吧，這個查遍了國內外的資料也沒法實現和ios一樣，希望有能解決的小夥伴也告訴我下

自動播放

    var video = $("#video")[0];
    video.play();
複製程式碼

本以為這樣就可以實現 視訊自動播放了，微信的機制限制了不允許自動播放，翻了下資料還好有解決方法

    var video = $("#video")[0];
    document.addEventListener("WeixinJSBridgeReady", function () {  
              video.play();  
    }, false); 
    
複製程式碼

是的，微信有自帶WeixinJSBridgeReady方法，我們只要監聽它就行了，IOS完美解決。 “那個誰，把你安卓手機借來看下”，怎麼黑屏....... android下不允許js進行播放視訊，必須由使用者互動來觸發播放

最後的解決方案是這樣的： 第一個視訊由canvas來畫出載入第二個視訊的載入狀態，等預載入完畢後點選一個按鈕或者滑動播放視訊，給使用者營造一種是互動視訊的感覺，解決android無法自動播放的問題。 這個解決方案也是查了很多案例，最後在騰訊的一個吃雞宣傳視訊發現的，地址也貼出來給大家參考參考：
game.weixin.qq.com/cgi-bin/h5/…

預載入

在上面提到的預載入還有一個坑，這裡使用過的是HTML5原生的api

    video.addEventListener('canplaythrough',function(){
        //預載入完畢
      });
複製程式碼

呵呵，想得太簡單了，這次是ios出問題了，android很完美的執行了預載入回撥，ios好像不認識一樣。查了資料發現ios微信瀏覽器下不會執行這個回撥，回撥是在播放後才執行（我要你何用）。 又想到一個方案：

    video.buffered.length
複製程式碼

獲取它的載入長度，發現跟canplaythrough一樣，ios下還是沒法解決 最後，ios下做了模擬載入完畢，9M的視訊 10秒的預載入應該能使它流暢播放下去了。

總結

微信的坑還是得慢慢填，最後的預載入也會再嘗試找方案解決，第一篇文章就記錄這麼多了。

相關文章