TECHNICAL BLOG

2023/4/24 # 入門 2023/4 HLS(HTTP Live Streaming)動画配信入門

動画配信サービスなどでよく利用されるHLS(HTTP Live Streaming)という技術について紹介します。HLSを知ると動画配信について少し身近に感じるかもしれませんので、よかったらご覧ください。

動画撮影

Webコンテンツ(ファイル)

Webサーバに画像ファイルを配置し、ブラウザからHTML(imgタグ)を通して画像を閲覧することは、普段Web開発している人にとっては馴染みあるかと思います。

画像配信

同様に動画ファイルもWebサーバに配置して、HTMLにvideoタグで指定すれば動画閲覧することはできます。

ただし動画の尺が1時間・2時間と長くなると、動画ファイルのサイズも大きくなります。
すると、ブラウザがサーバから動画ファイルをダウンロードする時間が長くなり、結果なかなか再生できなくなってしまいます。

動画1ファイル配信

また、動画の途中だけ閲覧したくてもダウンロードし終わらないと閲覧できないため、ギガも大きく消費してしまいます。

HLSとは

そういった問題を解決してくれる技術としてHLS(HTTP Live Streaming)があります。
HLSはAppleが開発し、今では最も広く利用されている動画配信プロトコルです。
(現在では類似の規格としてMPEG-DASHもありますがiPhone非対応です)

HLSでは動画ファイルを、10秒単位などの短い尺の動画ファイルに分割して、都度ブラウザに取得してもらうルールになっています。ブラウザは最初の2・3ファイル取得できれば再生しつつ、裏で次のシーンのファイルを取得しシームレスに再生し、わんこそばのように次々取得し再生していきます。

動画分割配信

また、途中から見ようとシークバーを早めたり戻した場合も、再生したい時点の2・3ファイル取得だけできれば再生してくれます。(シークバーを動かしたらローディング中のまま再生されない場合は、この2・3ファイル取得に時間がかかっているんだなと、暖かい目で待ってあげてください。)

マニフェストファイル

HLSには動画を分割するアイデア以外に、もう1つ重要なルールとしてマニフェストファイルがあります。

大きな役割として、ユーザの通信帯域に合わせて高・低画質を配信できる仕組みと、分割したファイルのまとめ役の2つがあります。

Wifi環境と電波の悪い所では、ダウンロードスピードが異なります。ダウンロードが遅いと再生中に次の動画の取得が間に合わずに再生が止まってしまいます。そうならないように、同じコンテンツでもファイルサイズの小さい低画質版動画があり、親マニフェストファイルにはダウンロードスピード別の子マニフェストが複数定義されています。

マニフェスト

そして、子マニフェストファイルには順番に再生すべき分割された動画のファイルが定義されており、ブラウザは子マニフェストに従って順番に再生してたり、シーク後のファイルを取得していく仕組みとなっています。

Live配信

撮影し続けているライブは、ライブ終了するまで1つの動画ファイルとして完結しないため、最初の章で説明した1動画ファイル方式では配信できません。

しかし、HLSではHTTP Live Streamingの名前の通り、ライブ配信ができます。

下の図のように、子マニフェストファイルが都度更新され、分割された動画ファイルも順次アップロードされます。そして、ブラウザは子マニフェストを定期的に取得し、次々と配信されたライブ動画を取得&再生していきます。

ライブ配信

ただ仕組み上、以下の2点からテレビほど厳密なリアルタイムLive配信ではありません。

  • 10秒分のライブ動画が出来上がり、アップロードされる時間
  • 配信者が子マニフェストが更新したタイミングと、ブラウザが定期的に取得するタイミングは完全一致しない

30秒程度の遅延は発生しますが、比較的シンプルでHTTP通信だけで実現できるため、HLSは現在も広く利用されています。

最後に

今回はHLSの概要について紹介させていただきました。今では動画を見ることはとても身近なことですが、その裏側を楽しく知ってもらえたら幸いです。