【初心者向け】HLS（HTTP Live Streaming）ってなあに

HLS形式とは

• HTTP Live Streamingの略
• 動画の配信形式

ファイル構成

• m3u8ファイル(.m3u8)
  • 読み方不明です。えむさんゆーはちファイルと呼んでいます。。
  • どの順番でセグメントファイルを再生するかが書かれている、プレイリストのようなもの。
• セグメントファイル(.ts)
  • 数秒単位で細切れにした動画ファイル

m3u8ファイル

プレイリストに従って、順番にセグメントファイルを取得し、再生していきます。

playlist.m3u8

// メタ情報
#EXTM3U  　　　　　　　 // 宣言
#EXT-X-VERSION:3     // バージョン
#EXT-X-TARGETDURATION:13  // 各セグメントの最大継続時間
#EXT-X-MEDIA-SEQUENCE:0   // 最初のセグメントの番号

// 以下プレイリスト
#EXTINF:12.387,  // tsファイルの再生時間
media_0.ts       // tsファイル
#EXTINF:2.653,
media_1.ts
#EXTINF:3.663,
media_2.ts
....
略
....
#EXT-X-ENDLIST   // 終了を示す

変換

一般的な動画ファイル(mp4など)からHLS形式配信用のファイルへ変換が必要となります。
FFmpegというツールで動画の変換が可能です。
また、動画配信系のCDNサービスによっては、mp4をアップロードするとHLS形式に変換してくれる機能が提供されていることもあります。

プレイヤー

<video>タグに設定するだけでは、再生できず、専用プレイヤーが必要です。方法としては２つ考えられます↓↓

• 動画配信系サービスの専用プレイヤーを利用
  • 機能 | ULIZA Player (HTML5)ユーザーガイド
• hls配信用パッケージを用いて独自でプレイヤーを実装
  • GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
  • Video.js - Make your player yours | Video.js

少し調べたところ、safariでは<video>タグで再生ができるようです。。(知らなかった、試してはいない)Safari専用サービスなら、プレイヤー開発の手間が不要そうですね。

他機能

詳しく調べたら別の記事にしようと思います。これらの機能がHLS形式のメリットと思われます！！(多分)

• セグメントファイルの暗号化
• 複数のビットレートへの対応

参照

• 【初心者向け】 HLS（HTTP Live Streaming）とは？ 技術概要や活用方法を解説 - Ｊストリーム