微信浏览器m3u8格式视频不能自动播放视频,解决方法,亲测有效

需求:使用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()
				}
			})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值