HLS错误处理

简介: hls.js是一个JavaScript库,可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。

HLS错误类型

Hls所有错误都通过唯一的单个事件发出信号。

每个错误按以下方式分类:

  • Hls.ErrorTypes.NETWORK_ERROR 对于网络相关的错误
  • Hls.ErrorTypes.MEDIA_ERROR 媒体/视频相关错误
  • Hls.ErrorTypes.OTHER_ERROR 对于所有其他错误

侦听错误示例代码:

hls.on(Hls.Events.ERROR, function (event, data) {
varerrorType=data.type;
varerrorDetails=data.details;
varerrorFatal=data.fatal;
switch (data.details) {
caseHls.ErrorDetails.FRAG_LOAD_ERROR:
// ....break;
default:
break;
}
});


致命错误恢复

hls.js 提供了通过以下 2 种方法尝试恢复致命网络和媒体错误:

  • hls.startLoad()用以恢复网络错误。
  • hls.recoverMediaError()用以恢复媒体错误。

错误恢复示例代码:

varhls=null;
functionfnCameraPlayer(id){  
varvideo=document.getElementById(id);
varvideoSrc=video.getAttribute('rtmpPath');
if (video.canPlayType('application/vnd.apple.mpegurl') ||video.canPlayType('application/x-mpegURL')) {
video.src=videoSrc;
video.addEventListener('loadedmetadata', function() {
video.play();
    });
  } elseif (Hls.isSupported()) {
hls=newHls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
video.play();
    });
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {  
switch(data.type) {
caseHls.ErrorTypes.NETWORK_ERROR: 
if (data.details===Hls.ErrorDetails.MANIFEST_LOAD_ERROR||data.details===Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT||data.details===Hls.ErrorDetails.MANIFEST_PARSING_ERROR) {
hls.loadSource(videoSrc)
          }
else {
hls.startLoad()
          }
break;
caseHls.ErrorTypes.MEDIA_ERROR:    
hls.recoverMediaError();
break;
default:
hls.destroy();
break;
        }
      }      
    });
  }
}


hls.swapAudioCodec()

如果调用后仍然引发媒体错误hls.recoverMediaError(),调用此方法可能有助于   解决音频解码器不匹配的问题。

工作流程应该是:

关于第一媒体错误:调用hls.recoverMediaError()

如果在第一个媒体错误之后快速引发另一个媒体错误:首先调用hls.swapAudioCodec(),然后调用hls.recoverMediaError()


参考地址:hls的使用方式

https://github.com/video-dev/hls.js/blob/master/docs/API.md#final-step-destroying-switching-between-streams

 

相关文章
|
编解码 Android开发 iOS开发
HLS直播协议详解
HLS直播协议详解
845 2
|
编解码 移动开发 视频直播
一文详解 m3u8 视频格式与分析视频秒开优化
秒开指的是,一秒内成功加载的播放数/播放总数。本意是想对比一下m3u8与mp4视频格式,并了解m3u8格式优缺点,以确定一个大概优化方向。但对m3u8做简单了解后,觉的m3u8可能是一个优化方向。
12512 4
一文详解 m3u8 视频格式与分析视频秒开优化
ant-design Upload上传组件使用 编辑功能图片回显
ant-design Upload上传组件使用 编辑功能图片回显
1239 0
|
负载均衡 Ubuntu 应用服务中间件
|
容器 Docker 数据安全/隐私保护
阿里云开源 image-syncer 工具,容器镜像迁移同步的终极利器
为什么要做这个工具? 由于阿里云上的容器服务 ACK 在使用成本、运维成本、方便性、长期稳定性上大大超过公司自建自维护 Kubernets 集群,有不少公司纷纷想把之前自己维护 Kubernetes 负载迁移到阿里云 ACK 服务上。
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
19440 2
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
4677 1
|
9月前
|
人工智能 自然语言处理 安全
已解决:国内如何使用Claude 3.5 Sonnet \ claude官网中文入口
已解决:国内如何使用Claude 3.5 Sonnet \ claude官网中文入口
1826 20
|
10月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
2104 1
|
JavaScript
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
1123 0