2022年版　HTTP Live Streaming（HLS）のやり方

Appleさんが開発したHTTP Live Streaming（以下、HLS）を活用すると難しい設定なしで、しかも既存のサーバーで簡単にストリーミングが実現できるって聞いたけどマ？
って思ってるアナタがたどり着いた記事がこちらです。
お疲れ様です！

Contents

デモサイト
概要
対応状況
HLSの仕組みとメリット
Macでの導入方法（Windowsは自分で調べて＾＾；）
実際に動かす方法
ローカルで動かす場合
Android気になったこと
文献

デモサイト

→デモサイトはこちら

概要

動画配信サイトが乱立している世界。
YouTubeやAbema TVなんかでも活用しているHLS技術。
こちらをサクッと解説します。

対応状況

まずは対応状況のおさらい。
2022年3月30日現在、下記のブラウザで利用できます。
Appleさんが作っただけあって、Safariはもちろん対応済み。
それ以外にはAndroidでも利用できます。

つまり、速度が気になるモバイル環境ではほぼバッチリHLSがいけちゃうわけです！

最新の利用状況をCan I useでチェックする

デスクトップ版Safari
iOS版Safari
Android Browser
Chrome for Android

HLSの仕組みとメリット

通常、videoタグでmp4を指定して配信するといわゆる擬似ストリーミングと呼ばれるプログレッシブダウンロードとなります。
これは途中からでも再生できますが、基本的に全てダウンロードしてキャッシュされてから威力を発揮されるタイプの配信手法です。

プログレッシブダウンロードだと、低速回線では読み込みに時間がかかり、なかなか再生されません。（header情報が読み込まれるまで待ちがかなり発生する）

今回紹介するHLSはピュアなストリーミング配信です。
ピュアなストリーミングはウェブ上で通常のmp4ではなく、m3u8 + tsに分割して配信します。
低速回線でも細切れパーツ（ts）を順次読み込むので、最初からでも、途中からでも素早く再生可能です。
今後、ウェブサイトで動画を使用する場合（実際に見る動画や飾りの背景動画も含めて）、このストリーミングの方式の方が優れていると思います。

概要

通常、動画をストリーミングする場合は、別途高価なストリーミングサーバーが必要である。
しかしながら、Appleが開発したHTTP Live Streaming（HLS）を活用すると簡単に（対応ブラウザでは、m3u8+tsソースをvideoタグで指定するだけで）ストリーミングできる。
しかも、ネイティブ対応していないブラウザChrome、Firefox等のためにポリフィルが存在する。
それが「hls.js」です。
この「hls.js」とあわせて「ffmpeg」でmp4を変換し生成した「m3u8 + ts」ソースがあれば簡単に、既存のサーバーでストリーミングできます。

メリット

再生が細切れされた単位で連続で配信されるので、低速回線でも素早く再生される。
途中からでも素早く再生できる。

デメリット

ffmpegの変換が少しだけ面倒だけど、慣れると秒

Macでの導入方法（Windowsは自分で調べて＾＾；）

サンプルの動画ではmp4（30MB）をm3u8のプレイリストと、16個のtsファイル（Transport Stream）（1s動画＋残りコマ動画）に分割して連続再生しています。
iOSではネイティブ動画を再生させるため、jsで直接m3u8を読み込むように分岐させています。
IE11も対応しているはずなのですが、このソースでは再生できませんでした。
~~※IEいらないんじゃね？？~~

homebrewでffmpegインストール

brew install ffmpeg　←最近アップデートしていないとアップデートで時間かかる

m3u8 + tsの作成

元となるmp4を用意します。
ffmpegで変換すると、プレイリスト（m3u8 ）と、動画データ（ts）に分割したソースができあがります。
下記ソースコードのv.mp4が変換元の動画ファイルで、v%3d.tsとv.m3u8は変換後のファイルです。（数が多くなるので、とりあえずvという名前のフォルダに格納するように設定しています）
time 1の箇所は、tsソースを何秒単位で分割するか？の設定箇所で、1＝1秒です。
15秒動画の場合は、15個のtsソースに分割されます。

ffmpeg -i mv.mp4 -c:v copy -c:a copy -f hls -hls_time 1 -hls_playlist_type vod -hls_segment_filename mv%03d.ts mv.m3u8

実際に動かす方法

ネットからhls.jsをローカルにダウンロードして、下記コードを指定すればいい感じに表示されました。
GitHubからhls.jsをダウンロードする

<video id="v" controls autoplay muted playsinline loop></video>
<script src="hls.js"></script>
<script> var video = document.getElementById('v'); var videoSrc = 'mv.m3u8';
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc; //iOS等
} else if (Hls.isSupported()) {
var hls = new Hls(); hls.loadSource(videoSrc); hls.attachMedia(video);
} </script>

ローカルで動かす場合

ローカルで動かす場合は、動かす用の記述をしないといけない。
通常はhttpsのSSL通信でのみ閲覧確認できる。
ローカル上でhttpsをエミュレートする必要があるとか、ないとか。

Android気になったこと

SoCの性能、特にGPU側の性能が低いAndroid端末（Chrome使用）の場合、videoタグでm3u8を指定して同じページ内に複数動画を表示する場合、最初に読み込まれた方は再生されますが、次に読み込まれた方は再生されないです。
これは私が調べた端末で発生しました。
iPhoneでは問題なく再生されていたので、スペック的な問題なのかな〜と思っています。
ですから、GPU性能が低い端末で確認する場合でなおかつ複数のm3u8動画を表示したい場合、確認気をつけた方がいいですよ〜というご案内でした。