ブラウザだけで3分、初めてのM3U8ストリーム再生
用意するのはURLひとつ
ソフトのインストールも、拡張機能の追加も要りません。必要なのは.m3u8へのリンクを1本だけです。手元に再生したいURLがまだないなら、配信テスト用に公開されているストリームを使うのが手っ取り早いでしょう。たとえばhttps://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8は長年安定して動く定番の検証用ストリームで、初回の動作確認にぴったりです。
貼り付けて再生するまで
オンラインプレーヤーを開いたら、あとは3動作だけです。
- 再生したいm3u8のURLをコピーする。
- ページ上部の入力欄に貼り付ける。
- 「再生」を押す。
数秒で映像が立ち上がります。オンデマンド動画ならプログレスバーで好きな場所へ飛べますが、ライブ配信では基本的に配信の先端に張り付いて進みます。画質は再生環境の帯域に合わせて自動で調整されるため、手動設定は不要です。
うまくいかないとき、エラーの読み方
初回はむしろ「再生できない」瞬間が一番の勉強になります。よくある3パターンを、症状と意味で整理しました。
- 延々と読み込み中のまま：ブラウザのコンソールを開き、「blocked by CORS policy」と出ていれば、配信元が他ドメインからの読み込みを許可していないことが原因です。プレイヤー側では回避できません。
- 403や404が返る：URLが期限切れ、またはホットリンク防止・地域制限に引っかかっています。リンクを採り直すか、参照元の条件を確認しましょう。
- 音だけ流れて映像が出ない：コーデックの非対応か、
EXT-X-KEYによる暗号化が関係していることが多いです。鍵が取れないストリームは再生が停止します。
自分のページに載せる
再生が上手くいったら、iframeで自分のサイトにも同じプレイヤーを置けます。埋め込みコードは1行です。
<iframe src="https://m3u8.kixtools.com/player.html?url=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
width="100%" height="480" frameborder="0" allowfullscreen></iframe>url=以降を自分のストリームに差し替えるだけで動きます。URLエンコードが必要な記号が含まれる場合も、そのまま貼り付けて構いません。
さらに踏み込んだ使い方やトラブル解消は、チュートリアルの一覧から目的の記事を探してみてください。