ブラウザでm3u8ファイルをストリーミングする

PCのブラウザでm3u8リンクを視聴しようとする時、通常であればファイルがダウンロードされてしまい、再生はできませんよね。
日本語でm3u8ファイルをストリーミングする方法の記事が見つからなかったので、残しておきます。

環境:
OS: Windows10Home
ブラウザー : Chrome 114.0.5735.199 (Official Build) （64 ビット）

方法① -拡張機能を使う

これがいちばん簡単な方法です。
まず、拡張機能(Native HLS Playback)をダウンロードします。

次に、パズルのピースのようなボタンを押します。(右上にある)

Native HLS Playbackをクリックします。

ENABLEをクリックします。
ボタンがDISABLEと表示されている場合、拡張機能は有効になっているので、この工程はスキップして大丈夫です。

再度m3u8ファイルの場所を検索バーに入力します。
問題なく工程を踏めていれば、m3u8ファイルが再生できます。

方法② -ffmpegを使う

m3u8ファイルは、サーバー上にある動画ファイル場所が記されたテキストファイルです。
つまり、サーバー上からファイルが削除されてしまうと、動画が再生できなくなってしまいます。
一時的な視聴なら方法①で問題ないですが、後で見返したいと考えている場合は、mp4ファイルへ変換する必要があります。

*長い動画の場合、莫大なファイルとなりストレージが圧迫される事に注意してください。
また、著作権の問題で保存をすると違法となってしまう場合もあるので、十分注意してください。

ffmpegの導入

ffmpegの導入は本記事で紹介するのには長すぎるため。外部の記事を参考にしていただきたいです。

Windows -> リンク
Mac -> リンク
Macではhomwbrewを使った方法のほうが簡単かもしれません。

ターミナルを開く

Windowsの場合は検索ボタンを押して、「cmd」と入力後、Enterを押します

Macの場合は、LaunchPad -> 「その他フォルダ」-> ターミナル を開きます

変換する

m3u8ファイルの場所と、出力したい名前を用意します。
出力したい名前の最後に.mp4をつけるのを忘れないでください。

ffmpeg -i "ここにファイルのurl" -c copy "アウトプットしたい名前.mp4" -loglevel quiet"

ffmpeg -i "https://-----.com/----.m3u8(ファイルの場所)" -c copy "アウトプットしたい名前.mp4" -loglevel quiet"
のように入力します。

正常に完了すると、mp4ファイルが出力されます。

通常、Windowsではローカルディスク(C:) -> Users -> 名前　のフォルダ内で出力されます。出力が終わったら適宜フォルダを作成し移動させたほうが良いでしょう。

Macの場合、Finder -> 画面端のメニューの移動 ->ホーム のフォルダ内で出力されます。

上級者向け: ターミナル上で出力したいフォルダに移動してから実行すると、指定したフォルダ内で出力できます。
また、アウトプット先の記述を"/Users/***/Videos/output.mp4"のようにするのも良いでしょう。

「command not found ffmpeg」等の表示が出た場合は、ffmpegのダウンロードが正常にできていないです。

mp4ファイルへの変換ができれば、ブラウザや通常のメディアプレイヤーで再生ができます。