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';
}