vue-player或TcPlayer在微信内自动播放video和audio

2024年2月27日 442次阅读 来源: chenjunbiao

不管是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即可。当然，具体的业务需要具体分析。

    原文作者：chenjunbiao
    原文地址: https://segmentfault.com/a/1190000014634158
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞