hls.js
v1.5.18
HLS.JS是一个JavaScript库，可实现HTTP实时流媒体客户端。它依靠HTML5视频和MediaSource扩展名来进行播放。
它通过将MPEG-2传输流和AAC/MP3流传输到ISO BMFF（MP4）片段来起作用。在浏览器中可用时，使用Web工作人员对传输进行异步进行。 HLS.JS还支持HLS + FMP4，如WWDC2016期间宣布的那样。
HLS.JS直接在标准HTML <video>元素的顶部工作。
hls.js写在ecmascript6（ *.js ）和typeScript（ *.ts ）（ES6的强烈输入超集）中，并使用babel和typeScript编译器在ecmascript5中进行了转移。
汇总用于构建发行捆绑包并为当地开发环境服务。
有关HLS格式和这些标签含义的详细信息，请参见https://datatracker.ietf.org/doc/html/draft-pantos-pantos-hls-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属性） #EXTM3U （忽略）#EXT-X-INDEPENDENT-SEGMENTS （忽略）#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-BITRATE#EXT-X-BYTERANGE=<n>[@<o>]#EXT-X-MAP:<attribute-list>#EXT-X-KEY:<attribute-list> （ KEYFORMAT="identity",METHOD=SAMPLE-AES仅支持mpeg-2 ts段）#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 （跳过加载差距和零件。跳过播放无封闭程序的播放，只包含差距内容，没有合适的替代方案。请参阅＃2940）解析但缺少功能支持：
#EXT-X-PRELOAD-HINT:<attribute-list> （请参阅＃5074）有关问题的完整列表，请参见“发布计划和积压项目”选项卡中的“头等大事”。编解码器支持取决于运行时环境（例如，并非同一OS支持HEVC上的所有浏览器）。
#EXT-XI-FRAME-STREAM-INF i-frame媒体播放列表文件REQ-VIDEO-LAYOUT不用于变体过滤或选择SAMPLE-AES方法键require您可以在节点中安全地要求此库，绝对不会发生任何事情。虚拟对象被导出，因此要求库不会丢失错误。 hls.js在node.js中是不可接方的。有关更多详细信息，请参见＃1841。
首先，结帐存储库并安装所需的依赖项
git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-check开发服务器将在端口8000上托管文件。启动后，可以在http：// localhost：8000/emo/。
在提交公关之前，请参阅我们的贡献指南。通过#HLSJS中的Video-dev.org在Slack上进行讨论，以进行有关开发的更新和问题。
构建所有口味（适用于Prod-Mode/CI）：
npm install ci
npm run build
只有调试模式文物：
npm run build:debug
构建和观看（自定义的开发设置，您需要通过另一台服务器托管的位置 - 例如在子模块/项目中）
npm run build:watch
只有特定的风味（已知配置是：调试，dist，Light，Light Dist，Demo）：
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
注意：始终构建“演示”配置。
注意： hls.light.*.js dist文件不包括备用audio，字幕，CMCD，EME（DRM）或可变替换支持。此外，在光构建中不可用以下类型：
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdController运行linter：
npm run lint
使用自动固定模式运行Linter：
npm run lint:fix
仅使用错误运行林格（无警告）
npm run lint:quiet
运行更漂亮的格式代码
npm run prettier
运行类型检查以验证打字稿类型
npm run type-check
立即运行所有测试：
npm test
运行单元测试：
npm run test:unit
在观察模式下运行单元测试：
npm run test:unit:watch
运行功能（集成）测试：
npm run test:func
可以在此处找到该项目设计的概述，它的模块，事件和错误处理。
请注意，您可以使用“ 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的浏览器兼容，并具有“视频/MP4” Mime-Type输入。
HLS.JS受支持：
缺少本机承诺支持的浏览器中需要承诺多填充。
请注意：
Safari浏览器（iOS，iPados和MacOS）通过普通视频“ TAG”源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作为您项目的依赖性：
npm install --save hls.js如果您更喜欢开发分支（主），也可以使用金丝雀频道：
npm install hls.js@canary
直接在页面上的脚本标签中直接包含dist/hls.js或dist/hls.min.js。此设置优先考虑HLS.JS MSE播放，而不是本机浏览器支持HLS播放的HLS播放：
< script src =" https://cdn.jsdelivr.net/npm/hls.js@1 " > </ script >
<!-- Or if you want the latest version from the main branch -->
<!-- <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 is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using 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 >
<!-- Or if you want the latest version from the main branch -->
<!-- <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' ;
//
// First check for native browser HLS support
//
if ( video . canPlayType ( 'application/vnd.apple.mpegurl' ) ) {
video . src = videoSrc ;
//
// If no native HLS support, check if HLS.js is supported
//
} else if ( Hls . isSupported ( ) ) {
var hls = new Hls ( ) ;
hls . loadSource ( videoSrc ) ;
hls . attachMedia ( video ) ;
}
</ script > HLS对原始视频文件的转码通常会稍微推动第一帧的时间。如果您依赖于原始视频和HLS流之间的帧时间确切匹配，则需要考虑以下内容：
let tOffset = 0 ;
const getAppendedOffset = ( eventName , { frag } ) => {
if ( frag . type === 'main' && frag . sn !== 'initSegment' && frag . elementaryStreams . video ) {
const { start , startDTS , startPTS , maxStartPTS , elementaryStreams } = frag ;
tOffset = elementaryStreams . video . startPTS - start ;
hls . off ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
console . log ( 'video timestamp offset:' , tOffset , { start , startDTS , startPTS , maxStartPTS , elementaryStreams } ) ;
}
}
hls . on ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
// and account for this offset, for example like this:
const video = document . querySelector ( 'video' ) ;
video . addEventListener ( 'timeupdate' , ( ) => setTime ( Math . max ( 0 , video . currentTime - tOffset ) )
const seek = ( t ) => video . currentTime = t + tOffset ;
const getDuration = ( ) => video . duration - tOffset ;有关更多嵌入和API示例，请参见DOCS/API.MD。
所有HLS资源都必须使用CORS标头允许GET请求。
视频通过HTML <video>元素HTMLVideoElement方法，事件和可选的UI控件（ <video controls> ）来控制视频。
以下玩家将HLS.JS集成了HLS播放：
 | |||
| CDN77 | |||
由Gramk制作，播放地址栏和M3U8链接的HLS
HLS.JS在Apache 2.0许可下发布
