EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

HLSのサムネイル動画作成について

クスパでは、料理教室の先生が作成した動画レッスンの有料配信サービスを展開しています。今回は、クスパで採用している動画配信方式HLSのサムネイル動画を作成する方法を紹介します。

cookingschool.jp

HLSとは

HLSはHTTP Live Streamingの略であり、Web上で動画や音声のストリーミング配信・再生を行なうためのプロトコル及びデータ形式の一つです。
Apple社が独自に開発した規格ですが、MaciPhoneだけでなくWindowsAndroid環境でも再生可能です。
現在ではHTTPストリーミング配信では最も多く利用されているプロトコルになります。

HLSの仕組み

HLSはインデックスファイル(.m3u8)とセグメントファイル(.ts)で構成されています。

インデックスファイル(.m3u8)

インデックスファイル(.m3u8)はプレイリストを格納するファイルで、tsファイルの順番や秒数、ファイル名等を定義して動画を再生させるように記述されています。

インデックスファイル構成例
---------
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.000000,
video_000.ts ←分割されらセグメントファイル(ts)ファイル(#EXTINF:10.000000:10秒単位で分割されている)
#EXTINF:10.000000,
video_001.ts
#EXTINF:10.000000,
video_002.ts
#EXTINF:10.000000,
video_003.ts
#EXTINF:10.000000,
video_004.ts
#EXTINF:10.000000,
video_005.ts
   ・
   ・
#EXT-X-ENDLIST
---------

また、各項目の説明は以下の通りです。

EXTM3U:m3u8形式であることを示しています
EXT-X-VERSION:m3u8形式のバージョンを示しています
EXT-X-TARGETDURATION:作成される各tsファイルがこの秒数以下であることを示しています
EXT-X-MEDIA-SEQUENCE:リスト内の最初のtsファイルが動画全体の何番目のtsファイルかを示しています
EXT-X-PLAYLIST-TYPE:配信形式がオンデマンド(VOD)かライブ(EVENT)かを示しています
EXTINF:tsファイルの秒数とファイル名を示しています
EXT-X-ENDLIST:リストの最後であることを示しています

セグメントファイル(.ts)

動画コンテンツを細かく分割して格納したファイルで、インデックスファイルに定義された規則に従って再生されます。

サムネイル動画の作成方法

サムネイル動画は、元のインデックスファイル(.m3u8)の先頭からある一定のセグメントファイル(ts)を再定義したインデックスファイル(.m3u8)を作成することで実現しました。以下、サムネイル動画の構成例になります。

先頭から20秒のサムネイル動画を作成する場合
---------
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.000000,
video_000.ts
#EXTINF:10.000000,
video_001.ts
#EXT-X-ENDLIST
---------

今回は先頭から20秒のサムネイル動画を例として挙げましたが、コンテンツの用途によって開始位置・セグメントファイル(ts)の定義数等調整しながら活用してみて下さい。