使用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()
}
})
},
