こんにちは。クラウド推進技術部の牧田です。
今回は、HLS での VOD 配信において字幕のつけ方をご紹介したいと思います。
はじめに
字幕には大きく、オープンキャプションとクローズドキャプションがあります。
オープンキャプションは焼き込み字幕とも呼ばれ、動画自体に字幕を入れる方式であり、常に字幕が動画に表示されます。
一方で、クローズドキャプションは動画自体とは別に字幕を入れる方式であり、視聴者は自由にオンオフを切り替えることができます。
この記事はクローズドキャプションについて記述し、以下では、字幕という記述はクローズドキャプションを指すこととします。
動画に字幕をつけるには
まずは、動画に字幕をつける仕組みについてです。 この記事では HLS での字幕配信について説明するため、HLS 自体について知りたい方は過去のブログ記事を参照してください。 developers.play.jp
以下の3つの作業で動画配信に字幕をつけることができます。
1. 字幕のファイルを用意する。
2. 字幕のメディアプレイリストに 1 で用意した字幕ファイルのパスを記述する。
3. マルチバリアントプレイリストに 2 で用意した字幕のメディアプレイリストの URI を記述する。
1. 字幕ファイルを用意する。
HLS でサポートされている字幕ファイルは VTT ファイルです。 VTT ファイルとは、World Wide Web Consortium(以下、W3C) により策定された Web Video Text Tracks(WebVTT)形式に則って作成されるテキストファイルです。 中身に関しては後述するため、ここでは割愛します。
2. 字幕のメディアプレイリストに字幕ファイルを記述する。
以下は、字幕のメディアプレイリストの具体例です。
subtitles.m3u8
#EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:30 #EXTINF:30, https://www.example.com/subtitles.vtt #EXT-X-ENDLIST
1 で作成した字幕ファイル(ファイル名は subtitles.vtt としています)を上記のように記述します。パスの記述は相対パスでも可能です。
3. マルチバリアントプレイリストに字幕のメディアプレイリストを記述する。
以下のマルチバリアントプレイリストの具体例は、前出しているこちらの記事から抜粋したものです。
#EXTM3U #EXT-X-VERSION:3 #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="SUB",NAME="日本語",DEFAULT=NO,AUTOSELECT=NO,LANGUAGE="ja",URI="https://www.example.com/subtitles.m3u8" #EXT-X-IMAGE-STREAM-INF:BANDWIDTH=21506,CODECS="jpeg",RESOLUTION=192x108,URI="https://www.example.com/images.m3u8" #EXT-X-STREAM-INF:BANDWIDTH=1091244,AVERAGE-BANDWIDTH=787916,CODECS="avc1.4D401E,mp4a.40.2",RESOLUTION=640x360,CLOSED-CAPTIONS=NONE,SUBTITLES="SUB",FRAME-RATE=29.970 https://www.example.com/manifest_1.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=2382397,AVERAGE-BANDWIDTH=1595264,CODECS="avc1.64001F,mp4a.40.2",RESOLUTION=960x540,CLOSED-CAPTIONS=NONE,SUBTITLES="SUB",FRAME-RATE=29.970 https://www.example.com/manifest_2.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3859904,AVERAGE-BANDWIDTH=2519193,CODECS="avc1.64001F,mp4a.40.2",RESOLUTION=1280x720,CLOSED-CAPTIONS=NONE,SUBTITLES="SUB",FRAME-RATE=29.970 https://www.example.com/manifest_3.m3u8
このなかで注目していただきたいのは以下の箇所です。
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="SUB",NAME="日本語",DEFAULT=NO,AUTOSELECT=NO,LANGUAGE="ja",URI="https://www.example.com/subtitles.m3u8"
EXT-X-MEDIA タグで TYPE=SUBTITLES とし、2 で用意した字幕のメディアプレイリストの URI を記述します。これにより、字幕のプレイリストが関連づけられ、字幕つきで動画配信を行うことができます。
VTT ファイルの内容
先述しましたが、HLS で字幕つきの動画配信を行うためには VTT ファイルの作成が必要です。 ここでは VOD 配信に字幕をつける際の VTT ファイルの記述に関して説明していきます。
VTT ファイルのサンプル
まず、VTT ファイルの具体例を見ていただきます。
subtitles.vtt
WEBVTT 00:00:00.000 --> 00:00:07.000 text1 00:00:10.000 --> 00:00:14.000 text2 00:00:14.000 --> 00:00:20.000 text3 text3' 00:00:25.000 --> 00:00:30.000 align:start line:50% position:20% text4
上記のサンプルにおける以下のセットを cue と呼びます。
00:00:00.000 --> 00:00:07.000 text1
subtitles.vtt は、4つの cue から構成されており、尺は30秒のファイルです。
VTT ファイル作成のルール
ここでは、VTT ファイル作成に関していくつか重要なルールに関して記述します。
- 先頭に「WEBVTT」と記述する。
これによって、テキストファイルが VTT ファイルであると認識できます。 - 表示時間は「A --> B」の形で記述する。
字幕をつけたいコンテンツのオフセットの値で HH:MM:SS.fff の形式で記述します。
VTT ファイルのサンプルの text1 という文字は動画の開始点である0秒から7秒まで表示されます。 - text を複数行記述することができる。
text3 の箇所の記述のように複数行のテキストを表示することができます。 - cue ごとに空白行を入れる。
隔てるために空白行(連続する改行)を cue ごとに入れます。 - 表示位置を指定することができる。
text1, text2, text3およびtext3' はプレイヤーのデフォルトの位置に表示されます。
text4 のように cue を記述すると、テキストの表示位置を指定することができます。
align:start line:50% position:20%の記述に関して、align:startはテキストを左に寄せて表示させることを意味します。また、line:50%は画面の上端から画面全体の50%の位置の行から、position:20%は画面の左端から画面全体の20%の位置の列からテキストを表示させることを意味します。
その他の VTT ファイル作成に関して、詳しくは W3C の以下のページをご覧ください。 www.w3.org
おわりに
今回は、HLS での VOD 配信における字幕のつけ方について説明させていただきました。
また、今回は触れませんでしたが、VTT ファイルを記述する上で CSS のクラスを用いて文字色などを設定してテキストをリッチにすることもできます。
動画配信での字幕のつけ方はさまざまであり、HLS においてもライブと VOD で対応が異なるなど、この記事で説明していないことはたくさんあります。
ご紹介できたのはほんの一部にしか過ぎませんが、みなさんが動画配信における字幕の存在に興味を持っていただけたら幸いです。
