HLS
HLSとは
Http Live Streamingの略。
アップルが開発したストリーミング配信の規格のこと
HLS用の動画データの生成
まず、ffmpegをインストールする
npm install ffmpeg
ffmpegでmp4からインデックスファイル(.m3u8)とセグメントファイル(.ts)を生成する
ffmpeg -i [mp4ファイル]
-b:v [ビットレート]
-c:a [オーディオのコーデック指定]
-f [出力ファイルのフォーマット]
-g [動画のフレーム数]
-hls_playlist_type [ストリーミング設定]
-hls_time [分割する秒数]
-hls_segment_filename [出力ファイルの名称]
今回はABR(adaptive bit rate)機能のために1Mbps 10Mbpsの2つのビットレートで生成する。
ffmpeg -i original.mp4
-b:v 1M
-c:a copy
-f hls
-g 24
-hls_playlist_type vod
-hls_time 5
-hls_segment_filename 'output-1m%3d.ts' output-1m.m3u8
ffmpeg -i original.mp4
-b:v 10M
-c:a copy
-f hls
-g 24
-hls_playlist_type vod
-hls_time 5
-hls_segment_filename 'output-1m%3d.ts' output-1m.m3u8
マスターインデックスファイルの作成
各ビットレートへの参照を記述したmaster.m3u8を作成する
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000
1m/output-1m.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=10000000
10m/output-10m.m3u8
作成したすべてのファイルを以下のようなディレクトリ構成で配置し、サーバーにアップロードする

hls.jsのインストール
SafariとMicrosoft EdgeはHLSをサポートしているが、他のブラウザは非対応なのでhls.jsというライブラリをインストールしなければならない
npm install hls.js
※レンタルサーバーの場合は、CDNでhls.jsを読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.5.14/hls.min.js" integrity="sha512-js37JxjD6gtmJ3N2Qzl9vQm4wcmTilFffk0nTSKzgr3p6aitg73LR205203wTzCCC/NZYO2TAxSa0Lr2VMLQvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
HTML
<video id='video' controls />
Javascript
※CDNで読み込んでいる場合はImport文は要りません
import Hls from 'hls.js';
const video = document.querySelector('#video');
if ( Hls.isSupported() ) {
const hls = new Hls();
hls.loadSource('video/master.m3u8');
hls.attachMedia(video);
} else if ( video.canPlayType('application/vnd.apple.mpegurl') ) {
video.src = 'video/master.m3u8';
}