WebVTT ファイルフォーマット

HTML5 Advent Calendarの16日目です。
Advent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというイベントです。
HTML5 Advent Calendarの場合はHTML5について毎日違う人がブログを書くことになります。
私はその12/16の分を担当しています。

HTML5 Advent Calendar 2011 : ATND

html5-developers-jpのMLでも紹介されたWebVTTについて書いてみたいと思います。


WebVTT ファイルフォーマット

以前はWebSRTとして検討されていましたが、WebVTTとして独立したドラフトへとなりました。

拡張子は、「.vtt」となっており、videoタグの子としてのsrcで指定します。
例)

 <video id="main_movie" class="video_elm" controls>
  <source src='movie/test_movie.webm' type='video/webm'>
  <source src='movie/test_movie.mp4' type='video/mp4'>
  <track label="Japanese subtitle" kind="subtitles" srclang="ja" src="sub/subtitle_ja.vtt" default>
  <track label="english subtitle" kind="subtitles" srclang="en" src="sub/subtitle_en.vtt">
 </video>


WebVTT ファイルがどんなものか、ザックリと以下の順番の要素で構成されています。

WEBVTT(固定の文字列)
改行
id(オプション)
時間情報とスタイルの情報
テキスト情報
改行 ←改行が1つの情報(WebVTT cuesと呼ばれる)に対しての区切りとなっている
id(オプション)
時間情報とスタイルの情報
テキスト情報



以下ずっと繰り返し。


id」は、一意に判別するためのIDか、「Chapter 1」のようにチャプターの情報です。
チャプターの場合は、trackタグのkind要素は「chapters」を指定し、テキスト情報にはチャプターのタイトルを指定します。


時間の情報」は、以下のように表現されます。
開始時間 -> 終了時間

時間は、時:分:秒.ミリ秒「00:00:00.000」で表します。


スタイルの情報」では、表示の方法について指定します。
スタイルは、「種類:値」の組み合わせを、スペース区切りで複数指定することができます。
スタイルの種類としては、

・D:vertical 、D:vertical-lr
 縦書きの指定

・L:X 、L:X%
 Video上部からの表示位置(%か、行数)

・T:X%
 左右の表示位置

・S:X%
 ビデオの幅に対しての表示領域の幅

・A:start 、A:middle 、A:end
 テキスト自体の、左寄せ 、センターリング 、右寄せ

 

テキスト情報」では、実際に表示する文字の他に、タグのような形式でスタイルを指定することが可能です。
<c></c>
 このタグでは、CSSのクラスを<c.クラス名>のように指定できます。
<i></i>
 イタリック表示
<b></b>
 ボールド表示
<u></u>
 アンダーライン表示
<ruby></ruby>
 ルビ
<v></v>
 声の名前



WebVTT ファイルの例

WEBVTT

1
00:00:01.000 --> 00:00:02.000 A:start
左寄せで表示されます

2
00:00:02.500 --> 00:00:03.500 A:middle
これは真ん中寄せ

3
00:00:04.000 --> 00:00:05.000 A:end S:70%
右寄せ+幅が狭くなる

しかしながら、まだtrack要素にWebVTTファイルを指定したとしても、ブラウザでは何も表示されません。
独立したドラフトとして定義されたことをキッカケに、今後各ブラウザが対応していくものと思われます。


と、これだけだとただの紹介になってしまうので、実際にどんなふうになるかを試してみたくなったので、もう少し仕様を読んでみました。

ブラウザに読み込まれるWebVTTの情報はどの様になっているのかというと、、、
(ザックリとvideoの仕様を読み解く限り)

videoタグはMedia elementsインターフェイスを実装すると定義されています。
Media elementsの中の videoTracksExclusiveTrackListを返します。

ExclusiveTrackListは、videoタグに紐づいたtrackの情報を持っていて、トラックの切り替えや表示非表示などの管理を行います。
trackタグの情報を持つのがTextTrackであり、ExclusiveTrackListを通して操作されると思われます。

TextTrackは、vttファイルに書かれたWebVTT cueの情報(上記のWebVTT ファイルで説明した物)を、
1つのid、時間情報、スタイル情報、テキスト情報を持つTextTrackCue複数保持する、TextTrackCueListとして管理しています。


デモ

ザックリと読み解いた情報を元に、WebVTTに対応したvideoはどんな風になるかを、JavaScriptを使ってシミュレートしてみたいと思います。

デモのページ

このデモでは、jQuery拡張機能を使って、videoタグにvideoTracksを追加して、vttファイルのパースを行います。
videoタグのtimeupdateイベントを利用して、表示すべきテキストをvideoに重ねます。
時間がなく、スタイル系が中途半端ですが、なんとなくイメージしていただけるかなと(笑)

Chrome16、Safari5で動作確認しています。。