HLSの配信（レンタルサーバー）

2025/03/08 Javascript

HLSとは

Http Live Streamingの略。

アップルが開発したストリーミング配信の規格のこと

HLSのメリット

ライブ配信ができる

通常の<video>タグの場合、事前にアップロードされた動画ファイルを再生しますが、ライブ配信の場合は、動画ファイルがリアルタイムで更新されます

そのため、通常の<video>タグで配信できません

視聴者が放送中のコンテンツを即座に視聴できるように考えられたのがHLSです

動画のコピー防止（難化）

暗号化やDRMの設定ができるので、通常の動画ファイルよりもダウンロードするのが難しくなります

ライブラリのインストール

npm install ffmpeg

mp4からインデックスファイル(.m3u8)とセグメントファイル(.ts)を生成します

ffmpeg -i sample.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 <--- 出力ファイル名

※ ABR（adaptive bit rate）機能のために1Mbps 10Mbpsの2つのビットレートで生成します

コマンド実行時のコピー用

ffmpeg -i smart.webm -b:v 1M -c:a copy -f hls -g 24 -hls_playlist_type vod -h
ls_time 5 -hls_segment_filename "smart-1m%3d.ts" smart-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をサポートしていません

CDNでhls.jsを読み込みます（@latestとすることで常に最新版が読み込まれます）

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Javascript

<video id="video" controls />

<script>
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";
}
</script>

BACK