收藏
回答

使用uniapp+video+hls.js做H5的m3u8视频播放,ios16.1以上版本加载失败?

uniapp+video+hls 微信h5中,ios版本16以上的手机加载处理hls视频时,

会监听到Hls.Events.ERROR,details是bufferStalledError, fatal为false, type为mediaError

重试也加载不成功.

但是安卓和ios16.1以下版本可以正常流畅加载播放.

下面是处理代码:

onReady() {
		this.videoContext = uni.createVideoContext('myVideo', this);
		this.hlsjs = new Hls({
			maxBufferLength:30,
			maxBufferSize:50 * 1024 * 1024,
			maxBufferHole:5
		});
		this.hlsjs.on(Hls.Events.MANIFEST_PARSED, (e) => {
			this.wxAutoPlay()
		});
		this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
			uni.hideLoading()
			console.log("Hls..ERROR..加载失败=", data);
			if (!data.fatal) {
				if(this.retryCount<3){
					console.log('尝试重新加载....');
					console.log('this.hlsjs==',this.hlsjs);
					this.hlsjs.stopLoad()
					  // 尝试恢复媒体错误
					setTimeout(()=>{
						// this.hlsjs.recoverMediaError();
						this.hlsjs.startLoad();
					},2000)
					++this.retryCount
				}else{
					console.log('停止');
					this.hlsjs.stopLoad()
				}
			}		
		});
	},
wxAutoPlay() {
			if (window.WeixinJSBridge) {  //微信JS-SDK已经加载并准备好了
				WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
					console.log('WeixinJSBridge getNetworkType play')
					const video = document.querySelector('#myVideo video');
				    video.play()
				})
			} else if(!this.weixinJSBridgeAdded) {
				document.addEventListener("WeixinJSBridgeReady", function() {
					WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
					  console.log('WeixinJSBridgeReady getNetworkType play')
					  const video = document.querySelector('#myVideo video');
					  video.play()
					})
				},false)
				this.weixinJSBridgeAdded = true;
			}
		},
videoPlayLoadSource(url) {
			this.$nextTick(() => {
				const video = document.querySelector('#myVideo video');
				if (url.includes('.m3u8')) {
					if (Hls.isSupported()) {  //当前浏览器是否支持HLS.js库
						this.hlsjs.stopLoad();// 停止当前加载
						this.hlsjs.detachMedia();//从视频元素中分离H1s实例
						this.hlsjs.loadSource(url);//设置播放路径
						this.hlsjs.attachMedia(video);//解析到video标签上
					} else {
						this.wxAutoPlay()
					}
				} else {
					video.preload = "auto";
					this.wxAutoPlay()
				}
			})
		},
回答关注问题邀请回答
收藏

1 个回答

  • Wei
    Wei
    05-28

    Hls 是第三方插件吧,应该是版本的问题,建议升级Hls的版本

    05-28
    有用
    回复 3
    • 蔡徐坤
      蔡徐坤
      发表于移动端
      05-28
      已经升级到最新版本了1.5.8
      05-28
      回复
    • 蔡徐坤
      蔡徐坤
      05-28
      而且,是部分视频不能播放(新上的),其他视频是能正常播放的
      05-28
      回复
    • Wei
      Wei
      05-29回复蔡徐坤
      建议检查那部分不能播放的视频和正常播放的视频有什么差异
      05-29
      回复
登录 后发表内容