はじめに

実務で<video>だけで実装することが少なくなってきたのでHLS化についてまとめようかと。
長くて高画質な動画をスムーズに再生する様に実装しろよ！って無茶にも、華麗に実装できたらかっこいいでしょ？ねぇ？

HLSってなんぞ

HLS は HTTP Live Streaming の略で、Apple が定めた動画のストリーミング、オンデマンド配信（VOD）の技術。
つまり

高いコストをかけずにストリーミング配信ができる配信技術
マルチビットレート（アダプティブビットレート）に対応
様々なＯＳ・ブラウザで再生可能
ライブ配信にも対応できる

ここで重要なのは様々なOS、ブラウザで配信することができ、ストリーミング再生ができること。

ストリーミング再生とはインターネット上のメディア（映像や音楽など）をすぐに再生する技術のこと

HLSの簡単な仕組み

HLSではセグメント化※(分割)された動画データが必要。mp4形式などの動画ファイルを、

セグメントリストファイル(.m3u8)
セグメント動画ファイル(.ts)

に分割して、それを再生する。
下の様なファイル群

video.m3u8
video.mp4
video000.ts
video001.ts
video002.ts
video003.ts
video004.ts
video005.ts
video006.ts
...
..
.

これらのセグメントファイルはそれぞれ役割があり、

セグメントリストファイル(.m3u8)
- セグメント動画ファイルの場所、再生時間、再生順序などを記述したメタデータファイル。
セグメント動画ファイル(.ts)
- 動画形式はMPEGトランスポートストリームファイル形式と同じだが、これをさらに10秒毎のように、分割秒数を指定して分割した動画ファイル。

・・・どうやって動画分割すんねん！！！

動画の分割方法（ffmpeg）

ここで登場するのはffmpeg
動画や音声を加工するのに強力で万能な簡単ツールであり、このツールを使うと簡単に.m3u8や.tsを生成できます。

インストール

ffmpegはWindowsでもmac,その他OSでも使えてとても便利。
https://ffmpeg.org/
からDLできる。
macはHomebrewでインストール可能。

ターミナル

brew install ffmpeg

Homebrewが入っていない人はこちら

変換

いろいろな変換加工ができるが、今回は分割の方法のみを紹介
他が気になる方はこちらへ

以下のコマンドで、video.mp4 を video.m3u8 ファイルと、video001.ts などという名前のセグメントファイルを生成できる

ターミナル

ffmpeg -i video.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "video%3d.ts" video.m3u8

ffmpeg -i video.mp4 video.m3u8
- -i:変換ファイルを指定
-c:v copy,-c:a copy: Audio や Video のコーデックを元の mp4 ファイルのものをそのまま使うように指定（よっぽどがなければこのまま使う）
-f hls:動画のフォーマット
hls_time 9: 9 秒ごとに .ts ファイルに分割指定
-hls_playlist_type vod:オンデマンド配信
-hls_segment_filename "video%3d.ts":動画セグメントファイル名のフォーマットを指定

それぞれの用途に合わせて設定できたらHLSで使えるファイルの完成！
こんなのができているはず

video.m3u8
video.mp4
video000.ts
video001.ts
video002.ts
video003.ts
video004.ts
video005.ts
video006.ts
...
..
.

エラー出た人は変換したい動画がある階層にいるか確認してみて。
私は階層移動してなかったから焦ったよ？

HTMLへ実装

実はHLSはSafari、Edgeについてはネイティブ動画プレーヤーが標準でHLS対応しているが、Chrome、Firefox、IEについてはHLSに対応していないため再生できない。

今更そんな事って。。。

安心してください。
対応する js を付け加えるだけで使用可能です。

それはhls.js

以前は Video.js が主流だったがFlash対応向けに設計されている点と不具合が多い為、現在では hls.js が利用が多い。

hls.js を利用すると、以下のコードを書くだけで、Chrome、Firefoxのネイティブ動画プレーヤーにHLSに対応する機能を追加することができ、ストリーム再生可能となる。

index.html

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> //自前のサーバーに配置しない場合
<video id="video_smaple" controls>
<script>
    if(Hls.isSupported()) {
    var video = document.getElementById('video_smaple');//videoタグと同じIDにする
    var hls = new Hls();
    hls.loadSource('./video.m3u8'); //ここで.m3u8ファイルを指定
    hls.attachMedia(video);
     }
</script>

あら不思議！きれいに動画実装されているよ！

まとめ

Webの動画の掲載方法については、目まぐるしい速度で変化しているので、きっとこの技術もすぐ変わってしまうと思うが、最新の情報だけでなく、今自分が直面している問題に欲している情報をキャッチアップする事が大切だと感じた。
誰かの役に立てばと思います。

ね？カッコよかったでしょ？

HLSを使って重い動画をWEBサイトに実装する