hls.jsでM3U8 HLSストリームをオンライン再生
Chrome、Firefox、EdgeはMedia Source Extensionsを使用し、Safariは利用可能な場合ネイティブのHLS再生を使えます。
HLSプレイリストの直接URLを貼り付けてブラウザでの再生をテストし、アダプティブ品質レベルを検出し、ネットワークやメディアのエラーを表示します。ストリームのアップロードはありません。
Chrome、Firefox、EdgeはMedia Source Extensionsを使用し、Safariは利用可能な場合ネイティブのHLS再生を使えます。
マスタープレイリストのレベルを検出し、宣言された高さとビットレートで手動選択できます。
ローカルのVTT/SRT字幕の読み込み、速度変更、許可されたPNGフレームの保存、ネットワークやコーデックのエラー表示が可能です。
マスターまたはメディアプレイリストの直接URLを上に貼り付けて、再生を押してください。一時停止、シーク、音量、ピクチャーインピクチャー、全画面表示は、ブラウザが対応している場合、通常の動画コントロールで操作できます。
アダプティブビットレートの選択は、Media Source Extensions対応ブラウザではhls.jsが管理します。プレーヤーがメディアをプロキシ、録画、保存することはありません。
再生できれば、ブラウザがマニフェストに到達し、少なくとも1つの品質レベルをデコードできることが確認できます。ただし変換の保証にはなりません。VODのダウンロードでは、すべてのセグメントがアクセス可能であり続ける必要があるためです。
続いてマニフェスト解析ツールで、VOD状態、長さ、セグメント数、暗号化マーカー、選択した品質が使うコンテナを確認してください。
ブラウザ対応、プライバシー、ソースへのアクセス、出力の動作について、要点を簡潔に解説します。
プレイリストの直接URLを貼り付けて再生を押すだけです。対応ブラウザではこのページがhls.jsとMedia Source Extensionsを使用し、SafariはネイティブのHLS再生経路を使えます。
はい。マスタープレイリストが複数のレベルを公開している場合、hls.jsはネットワーク状況の変化に応じて適切なレベルを選択できます。検出された品質レベルはプレーヤーの下に一覧表示されます。
VLCはブラウザのCORSルールの制約を受けず、異なるヘッダーやCookieを付けられます。また、ブラウザでの再生には、Media Source Extensionsまたはネイティブのvideo要素が対応するコーデックが必要です。
いいえ。再生はブラウザとメディアホストの間で行われます。機密性の高い署名付きURLはローカルのブラウザ履歴に残る可能性があるため、共有デバイスへの貼り付けは避けてください。
はい。ただしソースが許可している場合に限ります。iOSとmacOSのSafariはHLSをネイティブ再生でき、AndroidとデスクトップのChrome・Firefoxはhls.js経由でMedia Source Extensionsを使用します。クロスオリジンリクエストをブロックする、または対応していないコーデックを使うソースは、どちらの経路でも失敗します。