需求:使用uniapp的video组件+hls插件 制作视频播放,需要切换手动视频或播完一集后自动播放
问题:由于浏览器限制,视频不能自动播放,需要用户手动触发才可以
解决:通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
})
} else {
document.addEventListener("WeixinJSBridgeReady", function() {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
})
})
}
附m3u8视频播放处理,外面套一层函数,传url进来
this.$nextTick(() => {
if (url.includes('.m3u8')) {
const video = document.querySelector('#myVideo video');
if (Hls.isSupported()) {
this.hlsjs.loadSource(url);//设置播放路径
this.hlsjs.attachMedia(video);//解析到video标签上
this.hlsjs.on(Hls.Events.MANIFEST_PARSED, (e) => {
video.play();
console.log("加载成功", e);
});
this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
// 监听出错事件
console.log("加载失败", event, data);
});
} else {
// 由于浏览器限制,视频不能够自动播放,需要用户手势触发才可以
// 通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制。
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
})
} else {
document.addEventListener("WeixinJSBridgeReady", function() {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
})
})
}
uni.hideLoading()
}
} else {
//不是m3u8格式的视频直接用这种方式播放
// 挂载完成获取 video 上下文对象 this.videoContext = uni.createVideoContext('myVideo', this);
this.videoContext.play()
}
})