hls.js
v1.5.18
HLS.JSは、HTTPライブストリーミングクライアントを実装するJavaScriptライブラリです。再生のためにHTML5ビデオとMediaSource拡張機能に依存しています。
MPEG-2トランスポートストリームをトランスマックスし、AAC/MP3ストリームをISO BMFF（MP4）フラグメントに変換することで機能します。トランスマックスは、ブラウザで利用可能な場合、Webワーカーを使用して非同期に実行されます。 HLS.JSは、WWDC2016で発表されているように、HLS + FMP4もサポートしています。
hls.jsは、標準のHTML <video>要素の上に直接動作します。
HLS.JSは、ECMAScript6（ *.js ）およびtypeScript（ *.ts ）（ES6の強く型付けされたスーパーセット）で記述されており、babelとtypescriptコンパイラを使用してecmascript5に透過しています。
ロールアップは、ディストリビューションバンドルを構築し、ローカル開発環境を提供するために使用されます。
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属性） #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 Playlists#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list>メタデータ#EXT-X-DEFINE:<attribute-list>変動インポートと代替（ NAME,VALUE,IMPORT,QUERYPARAM属性）#EXT-X-GAP （ギャップセグメントとパーツの読み込みをスキップします。ギャップコンテンツのみを含むバッファープログラムの再生をスキップします。解析されたが欠落している機能サポート：
#EXT-X-PRELOAD-HINT:<attribute-list> （＃5074を参照）問題の完全なリストについては、リリースプランニングおよびバックログプロジェクトタブの「最優先事項」を参照してください。コーデックサポートは、ランタイム環境に依存します（たとえば、同じOSサポートHEVCのすべてのブラウザではありません）。
#EXT-XI-FRAME-STREAM-INF iフレームメディアプレイリストファイルREQ-VIDEO-LAYOUTバリアントフィルタリングまたは選択では使用されませんSAMPLE-AESメソッドキーFMP4、AAC、MP3、VTT ...セグメント（MPEG-2 TSのみ）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-checkDEVサーバーはポート8000でファイルをホストします。開始すると、http：// localhost：8000/demo/でデモが実行されます。
PRを提出する前に、貢献ガイドラインをご覧ください。開発に関する最新情報と質問については、#HLSJSのVideo-dev.org経由でSlackのディスカッションに参加してください。
すべてのフレーバーを構築します（製品モード/CIに適しています）：
npm install ci
npm run build
デバッグモードアーティファクトのみ：
npm run build:debug
ビルドアンドウォッチ（別のサーバーを介してホストするカスタマイズされた開発設定 - サブモジュール/プロジェクトなど）
npm run build:watch
特定のフレーバーのみ（既知の構成は次のとおりです。デバッグ、ディスト、ライト、ライトディスト、デモ）：
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
注：「デモ」構成は常に構築されます。
注： hls.light.*.jsファイルには、代替オーディオ、字幕、CMCD、EME（DRM）、または可変置換サポートは含まれていません。さらに、ライトビルドでは、次のタイプは使用できません。
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerラン・リナー：
npm run lint
自動フィックスモードでリナーを実行します：
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タイプの入力をサポートするブラウザとのみ互換性があります。
hls.jsがサポートされています：
ブラウザでは、ネイティブの約束のサポートが欠けていると約束のポリフィルが必要です。
ご注意ください：
Safariブラウザ（iOS、iPados、およびMacO）には、プレーンビデオ「タグ」ソースURLを介してHLSサポートが組み込まれています。適切な機能検出を実行するには、以下の例（HLS.JSを使用）を参照し、HLS.JSまたはネイティブな組み込みHLSサポートの使用を選択します。
プラットフォームにMediaSourceもネイティブHLSのサポートもない場合、ブラウザはHLSを再生できません。
HLS.JSと互換性のあるものを超えて、複数のプラットフォームでHLSをサポートする意図である場合、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を直接含めます。このセットアップは、HTMLMediaElementsでのHLS再生のネイティブブラウザーサポートよりもHLS.JS MSE再生を優先します。
< 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の再生にHLS.JSを統合します：
 | |||
| CDN77 | |||
Gramk製で、アドレスバーとM3U8リンクからHLSを再生します
HLS.JSは、Apache 2.0ライセンスの下でリリースされます
