vue-player或TcPlayer在微信內自動播放video和audio

無論是IOS和Android，當video和audio初始src爲空，根據點擊不一樣的媒體源（非播放器控件），好比多個章節的視頻列表，動態給src賦值並執行play()方法時，大多數的機器並不會執行自動播放的動做，特別是在微信瀏覽器內。這是由於瀏覽器內核鑑於節省用戶在不知情的狀況下一進入頁面時形成沒必要要的流量損失。

IOS自動播放

使用微信JSAPI內置的WeixinJSBridge.invoke方法，綁定getNetworkType事件，返回wifi或是4G網絡信息來播放視頻。固然你綁定其它的事件也是能夠的。
此外，若是想要一加載頁面就自動播放，可使用JSAPI的wx.ready中去執行play()方法去執行，適合於一加載頁面就自動播放的業務場景。
上面兩種方式是微信在其瀏覽器裏面開放的一些內置接口，固然測試的時候會發現並不是全部的IOS版本或部分微信版本都須要在JSAPI裏調用，只須要設置autoplay屬性便可。
若是項目是使用vue框架，且一開始video或audio標籤在是v-if爲false的虛擬DOM中，當v-if爲true時須要等待DOM更新以後再執行play()方法，即在this.$nextTick的回調函數裏執行。
這裏還遇到了一個坑，使用vue-video-player組件第一次老是不能自動播放的緣由是，視頻或音頻的url賦值時必須使用this.playerOptions.src方法來進行切源，而不是this.playerOptions.sources[0].src。

let _this = this;
this.$nextTick(function () {
    let videoDom = document.querySelector("video")
    let video= _this.$refs.videoPlayer;
    if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function"){
        WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
            //video.player.play();//這裏使用的是基於video.js的vue-player插件
            videoDom.play();
        });
    }
})

若是你使用的是騰訊雲點播的TcPlayer播放器的話，則用不到上面的代碼，直接在new TcPlayer實例中將"autoplay"設置爲true便可。沒有研究它的源代碼實現邏輯，但我想應該是TcPlayer已經作了這塊的優化。

Android自動播放

安卓也跟IOS同樣，大部分的機器設置autoplay屬性和play()方法也是不能自動播放。
在vue中使用play()方法調試的時候發現會報一個DOMException異常問題，是由於video或audio的虛擬DOM的還沒生成，因此能夠在this.$nextTick回調裏執行。但即便這樣，有些安卓機器仍然沒法自動播放，必須點擊播放器控件上的播放按鈕才能夠，那麼這種思路是跑不通的。後面直接使用定顯時器來搞定，finish:

setTimeout(function(){
    let audioPlayer = document.getElementById("audioPlayer");
    audioPlayer && audioPlayer.play()
},0)

固然定時的時間在有些播放器插件還有點不同，使用vue-player時須要大概100ms的間隔，使用TcPlayer每次new一個以前先執行其destroy()方法銷燬以前的實例，新生成的實例只須要設置爲0便可。固然，具體的業務須要具體分析。