hls.js

第一步:设置和支持

首先在您的网页中包括(或未为未明的)。https://cdn.jsdelivr.net/npm/hls.js@latest``/hls.js

1
<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>

调用以下静态方法:检查您的浏览器是否支持MediaSource 扩展Hls.isSupported()

1
2
3
4
5
6
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
if (Hls.isSupported()) {
console.log('hello hls.js!');
}
</script>

第二步:实例化 Hls 对象并将其绑定到元素<video>

让我们

  • 创建元素<video>
  • 创建一个新的 HLS 对象
  • 将视频元素绑定到此 HLS 对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="video"></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
// bind them together
hls.attachMedia(video);
// MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !');
});
}
</script>

第三步:加载清单

您需要提供以下列表网址:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="video"></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
// bind them together
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !');
hls.loadSource('http://my.streamURL.com/playlist.m3u8');
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log(
'manifest loaded, found ' + data.levels.length + ' quality level'
);
});
});
}
</script>

第四步:通过元素控制<video>

视频通过 HTML 元素进行控制。<video>

HTML视频优化控制和事件可以无缝使用。

1
video.play();

第五步:错误处理

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

每个错误的分类为:

  • 其类型:
    • Hls.ErrorTypes.NETWORK_ERROR网络相关错误
    • Hls.ErrorTypes.MEDIA_ERROR媒体/视频相关错误
    • Hls.ErrorTypes.OTHER_ERROR所有其他错误
  • 其详细信息:
  • 其死亡:
    • false如果错误不是致命的,hls.js将尝试恢复它
    • true如果错误是致命的,则需要采取行动(尝试)恢复错误。

情如下

请参阅下面的示例代码以侦听错误:

1
2
3
4
5
6
7
8
9
10
11
12
13
hls.on(Hls.Events.ERROR, function (event, data) {
var errorType = data.type;
var errorDetails = data.details;
var errorFatal = data.fatal;

switch (data.details) {
case Hls.ErrorDetails.FRAG_LOAD_ERROR:
// ....
break;
default:
break;
}
});

致命错误恢复

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

hls.startLoad()

应调用以恢复网络错误。

hls.recoverMediaError()

应调用以恢复介质错误。

错误恢复示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
// try to recover network error
console.log('fatal network error encountered, try to recover');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('fatal media error encountered, try to recover');
hls.recoverMediaError();
break;
default:
// cannot recover
hls.destroy();
break;
}
}
});
hls.swapAudioCodec()

如果调用后仍出现介质错误,调用此方法可能有助于解决音频编解码码错误。工作流程应该是:hls.recoverMediaError()

在第一个媒体错误:调用hls.recoverMediaError()

如果在第一个媒体错误之后"快速"提出另一个媒体错误:先呼叫,然后调用。hls.swapAudioCodec()``hls.recoverMediaError()

最后一步:破坏,在流之间切换

hls.destroy()应调用以释放已使用的资源并破坏 hls 上下文。