原文链接 vue-player或TcPlayer在微信内自动播放video和audio
不管是IOS和Android，当video和audio初始src为空，根据点击不同的媒体源（非播放器控件），比如多个章节的视频列表，动态给src赋值并执行play()方法时，大多数的机器并不会执行自动播放的动作，特别是在微信浏览器内。这是因为浏览器内核鉴于节省用户在不知情的情况下一进入页面时造成不必要的流量损失。
1、IOS在微信内video 不能自动播放问题
在Ios微信内部是可以实现video自动播放的 由于微信禁止了自动播放 换个思路解决自动播放问题 (亲测基本可以自动播放)
html部分
1、 建议video 静音 muted 属性
<video :ref="`video${item.uuid}`" @touchstart.once="parentVideoPlay" muted autoplay="autoplay" playsinline="true" preload="auto" webkit-playsinline="true"
x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-type="h5" :poster="item.cover" :src="item.playbackUri"></video>
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代码
<audio src="" id="orderAudio" ></audio>
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在安卓微信内可以播放 请交流一下
