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便可。固然，具体的业务须要具体分析。