HLS.js：过去，当下和未来

来源：Global Video Tech Meetup：Seattle 主讲人：Rob Walch 内容整理：尹文沛 主讲人介绍了 HLS.js 是什么，以及 HLS.js 近一年到两年间是如何发展改进的。

目录

• 概述
• 什么是 HLS.js？
  • 创建一个 HLS Manifest
• 什么是 MSE？
• 一些 HLS.js 的其他释义
• HLS.js 的历史
• HLSv1.0
• 为你的流添加 HLS
  • 生成视频段
  • 提供播放列表增量更新
  • 阻止播放列表重载
  • 预加载提示和阻塞媒体下载
  • 提供报告的副本

概述

HLS.js 是一款由苹果公司开发的，在浏览器中播放 HLS 的视频播放器。在最近，苹果发布了 Safari 浏览器中的低延时 HLS(LL-HLS)，同时在其他浏览器中实现了基于 HLS.js 的播放器。

在 2015 年，HLS 项目由 Guillaume du Pontavice 创建。js 使用媒体源扩展(Media Source Extensions)来支持 Html Media element 播放来自 javascript 的媒体流。

什么是 HLS.js？

HLS —— HTTP Live Streaming

Hls.js 是一个 JavaScript 库，支持在浏览器中播放 HLS，支持 MSE(Media Source Extensions)。(https://github.com/video-dev/hls.js/)

它的工作原理是将 MPEG-2 传输流和 AAC/MP3 流转换为 ISO BMFF（MP4）片段。当视频流被浏览器下载缓冲后，使用 Web Worker 异步执行转换。

创建一个 HLS Manifest

提供多个播放列表文件以提供相同内容的不同编码。

主播放列表描述了您内容的所有可用质量等级。每个质量等级是特定比特率的视频流，并且包含在单独的播放列表中。客户端根据实时和未来的网络吞吐量切换到最合适的质量等级接收。客户端播放器以此方法最大限度地减少播放的停滞，给用户提供最佳的观看体验。

主播放列表不会被重新读取。一旦客户端读取主播放列表，它会假定该视频流的所有质量等级不会更改。一旦客户端在其中一个单独的质量等级播放列表上看到 ext-x-endlist 标记，则流结束。

图1 创建 HLS Manifest

具体的实现可见 https://developer.apple.com/documentation/http_live_streaming/example_playlists_for_http_live_streaming/creating_a_master_playlist

什么是 MSE？

MSE 全称为 Media Source Extensions。

此规范扩展了 HTML Media Element [HTML] 允许 JavaScript 生成媒体流以进行播放。允许 JavaScript 生成流支持各种用例，如自适应流和时间转移直播流。

此规范允许 JavaScript 为 audio 和 video 动态构造媒体流。它定义了一个 MediaSource 对象，该对象可以作为 HtmlMedia 元素的媒体数据源。MediaSource 对象具有一个或多个 SourceBuffer 对象。应用程序将数据段附加到 SourceBuffer 对象，并可以根据系统性能和其他因素调整附加数据的质量。来自 SourceBuffer 对象的数据作为解码和播放的音频、视频和文本数据的曲目缓冲区进行管理。与这些扩展一起使用的字节流规范可在字节流格式注册表 [MSE-registry] 中找到。

图2 MSE 流程图

一些 HLS.js 的其他释义

1. HLS.js 是在浏览器中播放 HLS 的许多方法之一；
2. 苹果浏览器 Safari 是最先使用 HLS.js 的浏览器；
3. HLS.js 的目标是支持任何 HLS 流以及 Safari；
4. HLS.js 能够通过反馈助手向 Apple 报告错误和功能请求。

HLS.js 的历史

HLS.js 是由 Guillaume du Pontavice 于 2015 年在 Dailymotion 创建的开源项目。

图3 参与 HLS.js 开发人员的统计图

参与 HLS.js 开发的人历年来具体的贡献可见—— https://github.com/video-dev/hls.js/graphs/contributors?from=2015-01-25&to=2021-04-26&type=c

当 Guillaume 离任去往 Netflix 就职时，John Bartos 于 2018 年接管了 HLS.js。

之后，Bartos spec 提出 LHLS.js 应该作为低延迟传输流的标准。

直到现在我们众所周知的 DASH-industry 成型。

HLSv1.0

1. Releases · video-dev/hls.js (https://github.com/video-dev/hls.js/releases)
2. Projects · video-dev/hls.js (https://github.com/video-dev/hls.js/projects)
3. Get demo url from https://github.com/video-dev/hls.js/tree/deployments

为你的流添加 HLS

后端生产工具和内容交付系统必须实施新规则，以实现低延迟流播放。低延迟 HLS 在以下方面提供了新功能：

1. 生成视频段；
2. 播放列表增量更新；
3. 阻止列表重加载；
4. 预加载提示和阻塞媒体下载；
5. 传输流报告。

HLS 规范定义了 Pantos-HLS-RFC8216BIS 修订版 7 及更高版本的低延迟扩展。

生成视频段

低延迟 HLS 为在媒体播放列表的实时边缘分发媒体提供了一个并行通道，它将视频划分为大量较小的文件，如 CMAF 块。这些较小的文件称为 HLS 分段。由于每个段的持续时间较短，因此可以比其父段更早打包、发布并添加到媒体播放列表中。虽然常规媒体段可能每个为 6 秒，但示例部分段可能仅为 200 毫秒。第一个部分段可能仅在前一个段发送后 200 毫秒发送，然后是 29 个对等段，最后是一个规则长度的 6 秒视频段，其中包含与其 30 个部分段的串联相同的媒体。为了减少播放列表膨胀，一旦媒体播放列表中的部分片段从 live edge 中超过 3 个目标持续时间，服务器就会将其从媒体播放列表中删除。

您可以使用新的 EXT-X-PART 标记将部分片段添加到媒体播放列表中。你可以在父段边界处放置其他视频段标记（如EXT-X-DISCONTINUITY）。

提供播放列表增量更新

客户端使用低延迟 HLS 更频繁地更新播放列表。他们可以请求，服务器可以提供播放列表增量更新，从而降低传输成本。这些更新将用新的 EXT-X-SKIP 标记替换客户端已有的播放列表中的部分信息。

阻止播放列表重载

为了让客户端对视频段的请求更加高效，低延迟 HLS 阻止了播放列表重载。当客户端发出 HTTP GET 请求媒体播放列表更新时，它可以添加称为传递指令的特殊查询参数，以指定相应的播放列表进行增量更新。然后服务器保留请求（块），直到包含该片段的播放列表版本可用。阻止播放列表重新加载，可消除播放列表轮询。

预加载提示和阻塞媒体下载

在全球范围内交付低延迟流时，消除不必要的往返至关重要。服务器使用一个新标记 EXT-X-PRELOAD-HINT 通知客户端即将出现的部分段和媒体初始化部分。客户端可以提前发出对资源的 GET 请求；一旦资源可用，服务器将立即响应请求。

提供报告的副本

在低延迟播放时，客户端必须能够以最少的往返次数切换格式副本，以便执行比特率自适应。为支持此功能，服务器会将主播放列表中其他格式的副本报告添加到每个媒体播放列表中。EXT-X-RENDITION-REPORT 标签包含格式副本报告，并提供该格式副本的媒体播放列表中当前最后一个视频序列号等信息。

附上演讲视频：

http://mpvideo.qpic.cn/0bc3tyab2aaammahbmycsnrfbhwddwpaahia.f10002.mp4?dis_k=9e72c57039a4c6f083d8fe209fbea4c7&dis_t=1645153394&vid=wxv_2260463545899499527&format_id=10002&support_redirect=0&mmversion=false