WebVTT ファイルフォーマット
HTML5 Advent Calendarの16日目です。
Advent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというイベントです。
HTML5 Advent Calendarの場合はHTML5について毎日違う人がブログを書くことになります。
私はその12/16の分を担当しています。
html5-developers-jpのMLでも紹介されたWebVTTについて書いてみたいと思います。
以前はWebSRTとして検討されていましたが、WebVTTとして独立したドラフトへとなりました。
拡張子は、「.vtt」となっており、videoタグの子として
<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の中の videoTracksがExclusiveTrackListを返します。
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で動作確認しています。。