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許可下發布
