HLS.js 是一个实现 HTTP Live Streaming 客户端的 JavaScript 库。它依赖于 HTML5 视频 和 MediaSource Extensions 进行播放。

它通过将 MPEG-2 传输流和 AAC/MP3 流转换为 ISO BMFF (MP4) 片段来工作。转换过程在浏览器支持的情况下使用 Web Worker 异步执行。HLS.js 还支持 HLS + fmp4，这在 WWDC2016 上宣布。

HLS.js 直接在标准 HTML <video> 元素之上工作。

HLS.js 使用 ECMAScript6 (*.js) 和 TypeScript (*.ts)（ES6 的强类型超集）编写，并使用 Babel 和 TypeScript 编译器转译为 ECMAScript5。

Rollup 用于构建发布包并为本地开发环境提供服务。

功能

• VOD 和直播播放列表
  • 直播播放列表支持 DVR
• 分片 MP4 容器
• MPEG-2 TS 容器
  • ITU-T Rec. H.264 和 ISO/IEC 14496-10 基本流
  • ITU-T Rec. H.265 和 ISO/IEC 23008-2 基本流
  • ISO/IEC 13818-7 ADTS AAC 基本流
  • ISO/IEC 11172-3 / ISO/IEC 13818-3 (MPEG-1/2 Audio Layer III) 基本流
  • ATSC A/52 / AC-3 / 杜比数字基本流
  • 打包元数据 (ID3v2.3.0) 基本流
• AAC 容器（仅音频流）
• MPEG 音频容器（MPEG-1/2 Audio Layer III 仅音频流）
• HTTP Live Streaming 的定时元数据（MPEG-2 TS 中的 ID3 格式、CMAF/分片 MP4 中的 Emsg 以及播放列表中的 DATERANGE 标签）
• AES-128 解密
• 仅支持 MPEG-2 TS 段的"identity"格式 SAMPLE-AES 解密
• 支持 DRM（数字版权管理）的加密媒体扩展（EME）
  • FairPlay、PlayReady、Widevine CDMs 与 fmp4 段
• 基于 HTMLMediaElement 分辨率、丢帧和 HDCP 级别的级别限制
• CEA-608/708 字幕
• WebVTT 字幕
• 备用音轨渲染（带备用音频的主播放列表）用于 VoD 和直播播放列表
• 自适应流媒体
  • 手动和自动质量切换
    • 提供 3 种质量切换模式（可通过 API 控制）
      • 即时切换（当前视频位置立即切换质量）
      • 平滑切换（下一个加载的片段切换质量）
      • 带宽保守切换（下一个加载的片段切换质量，不清空缓冲区）
    • 在自动质量模式下，当带宽突然下降时紧急降低质量以最小化缓冲
• VoD 和直播的精确定位（不限于片段或关键帧边界）
• 能够在缓冲区和回退缓冲区中定位而无需重新下载片段
• 内置分析
  • 可监控所有内部事件（网络事件、视频事件）
  • 还公开播放会话指标
• 错误恢复能力
  • 库中内置重试机制
  • 可触发恢复操作以修复致命的媒体或网络错误
• 冗余/故障转移播放列表
• HLS 变量替换

支持的 HLS 标签

有关 HLS 格式和这些标签含义的详细信息，请参阅 https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis

多变体播放列表标签

• #EXT-X-STREAM-INF:<attribute-list> <URI>
• #EXT-X-MEDIA:<attribute-list>
• #EXT-X-SESSION-DATA:<attribute-list>
• #EXT-X-SESSION-KEY:<attribute-list> EME 密钥系统选择和预加载
• #EXT-X-START:TIME-OFFSET=<n>
• #EXT-X-CONTENT-STEERING:<attribute-list> 内容引导
• #EXT-X-DEFINE:<attribute-list> 变量替换（NAME,VALUE,QUERYPARAM 属性）

以下属性被添加到各自变体的属性列表中，但在选择和播放中未实现。

• VIDEO-RANGE（参见 #2489）

媒体播放列表标签

• #EXTM3U
• #EXT-X-VERSION=<n>
• #EXTINF:<duration>,[<title>]
• #EXT-X-ENDLIST
• #EXT-X-MEDIA-SEQUENCE=<n>
• #EXT-X-TARGETDURATION=<n>
• #EXT-X-DISCONTINUITY
• #EXT-X-DISCONTINUITY-SEQUENCE=<n>
• #EXT-X-BYTERANGE=<n>[@<o>]
• #EXT-X-MAP:<attribute-list>
• #EXT-X-KEY:<attribute-list> (仅支持带有MPEG-2 TS片段的KEYFORMAT="identity",METHOD=SAMPLE-AES)
• #EXT-X-PROGRAM-DATE-TIME:<attribute-list>
• #EXT-X-START:TIME-OFFSET=<n>
• #EXT-X-SERVER-CONTROL:<attribute-list>
• #EXT-X-PART-INF:PART-TARGET=<n>
• #EXT-X-PART:<attribute-list>
• #EXT-X-SKIP:<attribute-list> Delta播放列表
• #EXT-X-RENDITION-REPORT:<attribute-list>
• #EXT-X-DATERANGE:<attribute-list> 元数据
• #EXT-X-DEFINE:<attribute-list> 变量导入和替换（NAME,VALUE,IMPORT,QUERYPARAM属性）
• #EXT-X-GAP（跳过加载GAP片段和部分。跳过仅包含GAP内容且没有合适替代内容的未缓冲程序的播放。参见 #2940）

以下标签被添加到各自片段的属性列表中，但在流媒体和播放中未实现。

• #EXT-X-BITRATE（未在ABR控制器中使用）

已解析但缺少功能支持

• #EXT-X-PRELOAD-HINT:<attribute-list>（参见 #5074）
  • #5074

不支持

完整的问题列表，请参见发布计划和待办事项项目选项卡中的"最高优先级"。编解码器支持取决于运行环境（例如，同一操作系统上的不同浏览器对HEVC的支持情况不同）。

• HLS插入式广告
• #EXT-X-I-FRAME-STREAM-INF I帧媒体播放列表文件
• "identity"格式SAMPLE-AES方法密钥与fmp4、aac、mp3、vtt等片段（仅MPEG-2 TS）
• 带有FairPlay Streaming、PlayReady或Widevine加密的MPEG-2 TS片段
• FairPlay Streaming传统密钥（对于com.apple.fps.1_0，请使用原生Safari播放）
• Windows 10上IE和Edge（<=18）中的MP3基本流音频（参见 #1641 和 Microsoft answers forum）

服务器端渲染（SSR）和从Node.js运行时require

您可以安全地在Node中导入此库，绝对不会发生任何事情。导出了一个虚拟对象，以便导入库时不会抛出错误。HLS.js无法在Node.js中实例化。更多详情请参见 #1841。

开始开发

首先，检出仓库并安装所需的依赖项

git clone https://github.com/video-dev/hls.js.git
cd hls.js
# 克隆或从仓库拉取后，确保所有依赖项都是最新的
npm install ci
# 运行演示页面的开发服务器（文件监视时重新编译，但不写入实际的dist文件系统工件）
npm run dev
# 更改后运行健全性检查任务，以在提交更改前验证所有检查
npm run sanity-check

开发服务器将在8000端口上托管文件。启动后，可以在 http://localhost:8000/demo/ 找到运行的演示。

提交PR之前，请查看我们的贡献指南。 通过 video-dev.org 加入 #hlsjs 频道的Slack讨论，获取有关开发的更新和问题。

构建任务

构建所有风格（适用于生产模式/CI）：

npm install ci
npm run build

仅调试模式工件：

npm run build:debug

构建并监视（自定义开发设置，您需要通过另一个服务器托管 - 例如在子模块/项目中）

npm run build:watch

仅特定风格（已知配置有：debug、dist、light、light-dist、demo）：

npm run build -- --env dist # 将"dist"替换为其他配置名称，见上文^

注意：始终构建"demo"配置。

注意： hls.light.*.js dist文件不包括备用音频、字幕、CMCD、EME（DRM）或变量替换支持。此外，light版本中不提供以下类型：

• AudioStreamController
• AudioTrackController
• CuesInterface
• EMEController
• SubtitleStreamController
• SubtitleTrackController
• TimelineController
• CmcdController

代码检查器（ESlint）

运行代码检查器：

npm run lint

以自动修复模式运行代码检查器：

npm run lint:fix

仅运行错误检查（无警告）

npm run lint:quiet

格式化代码

运行prettier格式化代码

npm run prettier

类型检查

运行类型检查以验证TypeScript类型

npm run type-check

自动化测试（Mocha/Karma）

一次运行所有测试：

npm test

运行单元测试：

npm run test:unit

以监视模式运行单元测试：

npm run test:unit:watch

运行功能（集成）测试：

npm run test:func

设计

本项目的设计概述、模块、事件和错误处理可以在这里找到。

API文档和使用指南

• API和使用文档，包含代码示例
• 自动生成的API文档（最新发布版）
• 自动生成的API文档（开发分支）

注意，您可以使用"https://github.com/video-dev/hls.js/tree/deployments"访问特定版本的文档

演示

最新发布版

https://hlsjs.video-dev.org/demo

主分支

https://hlsjs-dev.video-dev.org/demo

特定版本

在 https://github.com/video-dev/hls.js/tree/deployments 上找到提交。

兼容性

HLS.js仅与支持MediaSource扩展（MSE）API和'video/MP4' mime类型输入的浏览器兼容。

HLS.js支持的平台：

• Android版Chrome 39+
• 桌面版Chrome 39+
• Android版Firefox 41+
• 桌面版Firefox 42+
• Windows 10+版Edge
• macOS 10.11+版Safari 9+
• iPadOS 13+版Safari
• iOS 17.1+版Safari（自HLS版本1.5.0起，使用托管媒体源(MMS) WebKit博客）

对于缺少原生Promise支持的浏览器，需要使用Promise polyfill。

请注意：

Safari浏览器（iOS、iPadOS和macOS）通过普通视频标签源URL内置支持HLS。请参阅下面的示例（使用HLS.js）以运行适当的功能检测，并在使用HLS.js或内置HLS支持之间进行选择。

当平台既没有MediaSource也没有原生HLS支持时，浏览器无法播放HLS。

请记住，如果打算在多个平台上支持HLS，超出与HLS.js兼容的范围，HLS流需要严格遵循RFC8216的规范，尤其是在需要支持应用程序、智能电视和机顶盒的情况下。

在此处查看MediaSource API的支持矩阵：https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

使用HLS.js

安装

预打包的构建版本包含在每个发布版本中。或者将hls.js作为项目的依赖项安装：

npm install --save hls.js

如果你更喜欢使用开发分支（master），也可以使用canary通道：

npm install hls.js@canary

嵌入HLS.js

直接在页面的script标签中包含dist/hls.js或dist/hls.min.js。这种设置优先使用HLS.js MSE播放，而不是浏览器原生支持的HTMLMediaElements中的HLS播放：

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<!-- 或者如果你想使用主分支的最新版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  // HLS.js不支持未启用媒体源扩展（MSE）的平台。
  //
  // 当浏览器内置HLS支持（使用`canPlayType`检查）时，
  // 我们可以直接通过`src`属性为视频元素提供HLS清单（即.m3u8 URL）。
  // 这是使用普通视频元素的内置支持，而不使用HLS.js。
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>

替代设置

要先检查原生浏览器支持，然后再回退到HLS.js，请交换这些条件语句。参见此评论以了解一些权衡。

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<!-- 或者如果你想使用主分支的最新版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  //
  // 首先检查原生浏览器HLS支持
  //
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    //
    // 如果没有原生HLS支持，检查是否支持HLS.js
    //
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
</script>

有关更多嵌入和API示例，请参阅docs/API.md。

CORS

所有HLS资源必须使用允许GET请求的CORS头进行传递。

视频控制

视频通过HTML <video> 元素 HTMLVideoElement 方法、事件和可选的UI控件（<video controls>）进行控制。

构建自定义UI

• Media Chrome

播放器集成

以下播放器集成了HLS.js以实现HLS播放：

• JW Player
• Akamai Adaptive Media Player (AMP)
• BridTV Player
• Clappr
• Flowplayer，通过flowplayer-hlsjs
• MediaElement.js
• KalturaPlayer，通过kaltura-player-js
• Videojs，通过Videojs-hlsjs
• Videojs，通过videojs-hls.js。hls.js作为SourceHandler集成 - Video.js 5中的新功能。
• Videojs，通过videojs-contrib-hls.js。内置完整回退兼容性的生产就绪插件。
• Fluid Player
• OpenPlayerJS，作为OpenPlayer项目的一部分
• CDNBye，一个由WebRTC Datachannel驱动的hls.js p2p引擎。
• M3U IPTV

他们在生产中使用HLS.js！

<img src="https://yellow-cdn.veclightyear.com/835a84d5/0c16025e-8c3b-4fd8-903c-ea5363db8961.jpg" width="120">	<img src="https://avatars3.githubusercontent.com/u/5497190?s=200&v=4" width="120">	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Canal%2B.svg/2000px-Canal%2B.svg.png" width="120">	<img src="https://avatars2.githubusercontent.com/u/115313" width="120">
<img src="https://yellow-cdn.veclightyear.com/835a84d5/46068deb-e93f-441f-bfd3-298453cd62ea.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/18e729a5-d3f8-4eb8-8624-1819e866faae.png" width="120">	<img src="https://avatars1.githubusercontent.com/u/12554082?s=240" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/44832664-5998-48df-9254-177f2ecf91a6.png" width="120">
<img src="https://images.gunosy.com/logo/gunosy_icon_company_logo.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/7eb4f21d-6cfa-478b-9945-5f9c3b6623cf.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/39b6cb06-259d-4719-aeaa-0ec60405c402.jpg" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/c6b165fe-aa93-4b5c-b8c5-c3e1414d1810.png" width="120">
<img src="https://yellow-cdn.veclightyear.com/835a84d5/2a5599fd-c11b-47a1-a4e9-8a8b68f1bb90.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/2e48fedc-8c14-4730-a2d4-4c078c85dd5c.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/9d2ae463-a0a8-4596-bf86-5ebba03dc1b8.jpg" width="120">	<img src="https://www.rts.ch/hummingbird-static/images/logos/logo_marts.svg" width="120">
<img src="https://yellow-cdn.veclightyear.com/835a84d5/c3ed5a2a-917c-427c-ac34-ecc0f455663c.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/5f1cc5ae-5748-4ac7-b669-63604f5feee5.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/ab54d2a8-09c2-4e00-b306-5dfa67805288.svg" width="120">	<img src="https://camo.githubusercontent.com/9580f10e9bfa8aa7fba52c5cb447bee0757e33da/68747470733a2f2f7777772e7461626c6f74762e636f6d2f7374617469632f696d616765732f7461626c6f5f6c6f676f2e706e67" width="120">
<img src="https://yellow-cdn.veclightyear.com/835a84d5/0e911299-9b6f-4e76-ba2d-9f0c606def49.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/6b4c11b8-edc0-48d7-888f-358281a110ae.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/dccd96bc-b277-4eb9-93ea-4a14b1ec3b87.jpg" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/7188845e-83ce-4c91-8c54-e2762f72b523.png" width="120">
<img src="https://yellow-cdn.veclightyear.com/835a84d5/2013c52c-34df-4214-a146-bb277c558218.svg" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/8e67e9f7-0ac9-4181-bda6-037fbf70b657.png" width="120">	<img src="https://avatars0.githubusercontent.com/u/5090060?s=200&v=4" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/a1ebdf9a-5e1e-4bdf-b954-f0e2f3849f86.svg" width="120">
<img src="https://showmax.akamaized.net/e/logo/showmax_black.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/05337911-1274-4763-a46b-4a887efbae55.svg" width="120" height="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/419fd3db-7228-4a1b-91d0-4ee02f47b571.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/c7745456-f213-43a9-b6b1-56b2035949a7.jpg" width="120">
cdn77	<img src="https://avatars0.githubusercontent.com/u/7442371?s=200&v=4" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/fdab5499-b0dd-4da1-abac-da2833a8ce5f.png" width="120">	<img src="https://avatars3.githubusercontent.com/u/45617200?s=400" width="120">
<img src="https://avatars1.githubusercontent.com/u/5279615?s=400&u=9771a216836c613f1edf4afe71cfc69d4c5657ed&v=4" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/6c140966-d40e-4c28-b94c-98a47ee86c80.png" width="120">	<img src="https://yellow-cdn.veclightyear.com/835a84d5/4317b38d-8325-41da-b9d1-081e2884cc8f.svg" width="120">

Chrome/Firefox 集成

由 gramk 开发，可从地址栏和 m3u8 链接播放 HLS

• Chrome 原生 HLS
• Firefox 原生 HLS

许可证

HLS.js 基于 Apache 2.0 许可证 发布