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

不管是IOS和Android，当video和audio初始src为空，根据点击不同的媒体源（非播放器控件），比如多个章节的视频列表，动态给src赋值并执行play()方法时，大多数的机器并不会执行自动播放的动作，特别是在微信浏览器内。这是因为浏览器内核鉴于节省用户在不知情的情况下一进入页面时造成不必要的流量损失。

1、IOS在微信内video 不能自动播放问题

在Ios微信内部是可以实现video自动播放的由于微信禁止了自动播放换个思路解决自动播放问题 (亲测基本可以自动播放)

html部分

1、建议video 静音 muted 属性

js部分

//首先引入微信jsdk
import WeixinJSBridge from 'weixin-js-sdk';
//this.$nextTick是为了保证DOM加载完毕
this.$nextTick(function() {
            this.videoIndex = i ? i : 0;
            let video = this.$refs['video' + this.list[i].uuid];
             //先暂停播放
            video[0].pause();
            //然后播放
            video[0].play();
          //禁止静音
            video[0].muted = false;
           //主要起决定性代码部分
            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
                        WeixinJSBridge.invoke('getNetworkType', {}, function() {
                            video[0].play();
                        });
            }
            document.addEventListener("WeixinJSBridgeReady", () => {
                    video[0].play();
             }, false);
});

Android Video自动播放

由于安卓对Video限制比较严重目前没有找到好的解决方式建议做个用户蒙版图层诱导用户点击屏幕或者给html加个touchstart 事件来触发播放

WechatIMG3634.png

关于Audio 自动播放问题

我的audio 自动播放需求类似于支付宝收款码需要语音自动播报问题当时找了各种解决方案以下方案最终实现安卓ios 都可自动播放

首先也得引入 weixin-js-sdk

html代码

js代码


/*
   * WebSocket接收到消息
项目基于websocket 实现语音推送
 */
        websocket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            if (data != 1) {
                var payMethod = data.payMethod == 'WeChatJsApi' ? '微信' : '支付宝'
                $('#payMethod').text(payMethod + '支付');
                var msgStr = payMethod + '到账' + data.orderTotalCoinsRMB + '元';
                audioPlay(msgStr);
            }
        }
//语音播报代码代码
//token 百度申请的token
function audioPlay(text) {
    var audioSrc =
        'https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx233223244&tok='+token+'&tex=' +
        encodeURIComponent(encodeURIComponent(text)) + '&vol=5&per=4&spd=5&pit=5';
        var audio = document.getElementById('orderAudio');
        audio.src = audioSrc;
/*主要代码部分
*必须先load
*播放一次 暂停一次再次播放才行
*/
      audio.load();
      audio.play();
      audio.pause();
      audio.play();
      document.addEventListener("WeixinJSBridgeReady", function() {
        audio.play();
      }, false);
         //监听audio播放完毕
      audio.addEventListener('ended', function () {
        
    }, false);
}
//必须空着调用一次
audioPlay('');

关于video和Audio 微信浏览器各自限制都不同我自己测试Audio 基本都能实现自动播放 Video只有Ios可以实现安卓不可以（建议通过诱导点击来实现）如果有哪位大佬可以实现video在安卓微信内可以播放请交流一下

关于H5 video Audio标签微信内不能自动播放的问题 vue