微信浏览器H5部分ios机型不能自动播放视频，解决方案

最新推荐文章于 2025-05-20 10:42:34 发布

mingxia_jiang

最新推荐文章于 2025-05-20 10:42:34 发布

阅读量2.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端微信文章标签：微信 ios 音视频

本文链接：https://blog.csdn.net/ZeBo_jiang/article/details/137835519

需求：使用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