WebVTTを利用した動画字幕 第1回 WebVTTの基本仕様
WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。今回はWebVTTの仕様をじっくり解説します。
WebVTTとは
WebVTT（ウェブブイティティ）とはWeb Video Text Tracksフォーマットの略であり、字幕などの時系列なテキスト表示に利用されるデータフォーマットです。
HTMLで動画を表示するためには、次のようにvideo要素を利用し、その要素内でsource要素を使用し、読み込む動画を指定します。その動画に対して、字幕を付けるためには、このWebVTTというデータフォーマットに沿って作成した.vttファイルを用意し、video要素内のtrack要素で読み込むように指定します。
vttファイルの読み込み例
<video class="with-caption" autoplay controls muted>
<!-- 読み込む動画ファイルの指定 -->
<source src="movie.mp4" type="video/mp4">
<!-- 読み込む字幕ファイルの指定（日本語） -->
<track label="日本語" kind="captions" srclang="ja" src="movie-ja.vtt" type="text/vtt" default>
<!-- 読み込む字幕ファイルの指定（英語） -->
<track label="English" kind="captions" srclang="en" src="movie-en.vtt" type="text/vtt">
</video>
本記事では、このWebVTTの書式や、読み込みについて解説していきます。まずはWebVTTについて解説します。
ブラウザのWebVTTへの対応状況
WebVTTは、IE10以上、Edge、Chrome、Firefox、Safari、Mobile Safari（iOS7.1以上）、Android Browser（Android4.4以上）で対応されています。
このほか、動画配信サービスYouTubeでもWebVTTがサポート*されています。
*注：YouTubeがサポートする字幕ファイル形式
YouTubeがサポートする動画の字幕ファイル形式については、ヘルプのサポートされる字幕ファイルに記載されていますが、WebVTTのファイル形式に対応しています。
WebVTTはあまりメジャーではない技術だと、著者自身は思っていたのですが、思っていたよりも広くサポートされていることに驚きました。
WebVTTの書式
まずは、WebVTTの書式について解説します。WebVTTはテキストファイルとして作成しますが、その中では、次のような項目が指定できます。
- 字幕の開始時間と終了時間をタイムスタンプで表す
- 字幕の水平・垂直位置
- 字幕の書字方向（ltr・rtl）
- 字幕テキストの装飾など
字幕の位置や書式の方向などについては、次回以降詳しく説明するので、今回はWebVTTの書式を解説します。
シンプルな記述を見てみましょう。
WebVTTの記述例（シンプル）
WEBVTT
NOTE
これはノートです。字幕としては表示されません。
00:00:00.000 --> 00:00:10.000
これはキューテキストです。字幕として表示されます。
NOTE 一行のノートです。字幕としては表示されません。
00:00:10.000 --> 00:00:25.000
そして、これはキューテキストです。字幕として表示されます。
以上を記述したテキストファイルをトラックファイル*と呼び、それを.vtt拡張子を付けてtrack要素で読み込ませると字幕が表示されます。
* 注：トラックファイル
厳密に言うと、トラックファイルにはこの記事で紹介するWebVTT書式（.vttファイル）と、TTML書式（.ttmlファイル）の2種類があります。TTMLファイルに関しては、この記事では触れません。
特にファイルフォーマットについて知らなくても、なんとなくですが、読めるのではないでしょうか。どういった内容で解釈されるのかは、VTTCaptions.comにあるファイルフォーマットについての部分を引用します。
WebVTTファイルの書式（全項目）
WEBVTT [file-description-text]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
[NOTE [<vttbr>][comment-text<vttbr>]]
[cue-id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
...etc
どういったフォーマットで解釈されるかを、ひとつずつ解説していきます。
ファイルの先頭の書式
ファイルの先頭
WEBVTT<vttbr>
<vttbr>
まずファイルの先頭はWEBVTTから始める必要があります。次に<vttbr>ですが、これは改行コードを示します（<vttbr>というタグを書くわけではありません）。つまりファイルの先頭はWEBVTTで始め、その行で改行し、次の行でまた改行するということです。
ノートの書式
ノートの書式
[NOTE [<vttbr>][comment-text<vttbr>]]
次にノートです。ノートはコメントです。字幕として表示されません。NOTEで始まり、改行して複数行にすることも、半角スペースを開けて1行で記述することもできます。ただし、複数行に渡ってコメントを書く場合、空白の行は許可されません。
comment-textの部分はコメントテキスト本体です。自由にテキストを記述できますが、-->という文字列は記述することができません。
キューの書式
キューの書式
[cue id<vttbr>]
Start timestamp --> end timestamp [vertical:value] [line:value] [position:value] [size:value] [align:value]<vttbr>
[cue-payload]<vttbr>
<vttbr>
トラックファイルのタイムスタンプとキューテキストの塊の部分をキューと呼びます。キューの前後は空の行で区切ります。必要であれば、キューにID（[cue id<vttbr>]）を指定することもできます。たとえば、my-cue-id-1などとIDを振ることができます。JavaScriptを使用して、このIDを指定することで、そのキューの内容を取得できます。
各キューでは、開始時間（Start timestamp）と終了時間（end timestamp）を矢印（-->）で区切り、hh:mm:ss.tttもしくはmm:ss.tttの形式*で指定します。必要であれば位置や文字サイズなどを続けて指定します。この装飾部分については、次回解説します。
その次の行にキューのテキスト（[cue-payload]）を指定します。テキストは自由に記述できます。このテキストは複数行にすることもできますが、空白の行は許可されません。
テキストには、&や<や>は直接記述することができませんので、記述する場合は&のように実体参照にする必要があります。さらに、HTMLのようにいくつかのタグ（<c>, <v>, <lang>, <b>, <i>, <u>, <HH:MM:SS.sss>, <ruby>）を利用できます。このタグについては次回解説します。
* 注：hh:mm:ss.tttやmm:ss.tttについて
タイムスタンプのフォーマットはどちらかである必要があります。それぞれの意味は次のとおりです。
- hhは時間（2桁以上）を表します
- mmは分（00〜59）を表します
- ssは秒（00〜59）を表します
- tttはミリ秒（000~999）を表します
トラックファイルの記述例
以上を踏まえて、前述のトラックファイルにキューIDなどを加えました。
WebVTTの記述例（詳細）
WEBVTT
NOTE
これはコメントです。
my-cue-id-1
00:00.000 --> 00:05.000 line:90%
<v げこたん>これは<b>WebVTT</b>による字幕です。
cue-id-2
00:05.000 --> 00:10.000 line:90%
<v soto3>これは<b>WebVTT</b>による字幕です。
cue-3
00:10.000 --> 00:15.000 line:90%
<v.loud げこたん>これはWebVTTによる字幕です。
my-cue-id-1やcue-id-2、cue-3がキューIDです。キューIDは、このキューの名前ですので、一意なものである必要があります。ここに登場するline:90%や<v げこたん>といった装飾については、次回の「字幕を装飾する」で解説していきます。
字幕を読み込む
まずは、テキストファイルとして、これまで解説した記法でトラックファイル（日本語と英語のもの）を作成し、拡張子を.vttとして保存します。それをtrack要素で読み込ませます。
日本語のトラックファイルはmovie-ja.vttとします。内容は次のとおりです。
日本語トラックファイル
WEBVTT
NOTE
日本語用のトラックファイルです。
00:00:00.000 --> 00:00:10.000
<v geckotang>これは<b>キューテキスト</b>です。<ruby>字幕<rt>じまく</ruby>として表示されます。
00:00:10.000 --> 00:00:25.000
<v soto3>そして、これは<b>キューテキスト</b>です。<ruby>字幕<rt>じまく</ruby>として表示されます。
そして、英語のトラックファイルはmovie-en.vttとします。日本語を英訳したものになっています。
英語トラックファイル
WEBVTT
NOTE
This is a track file for English.
00:00:00.000 --> 00:00:15.000
<v geckotang>This is <b>a cue text</b>. This is displayed on this movie for a caption.
00:00:05.000 --> 00:00:15.000
<v soto3>And this is also <b>a cue text</b>. This is also displayed on this movie for a caption.
次に、HTMLを用意します。track要素の属性値などについては、次回以降、解説しますが、src属性に読み込むファイル名、srclang属性に言語名、初期に利用される字幕にはdefault属性を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WebVTT Demo 6</title>
<style>
.with-caption {
width: 500px;
border: 3px solid tomato;
}
.with-caption::cue { font-size: 18px; }
.with-caption::cue(b) { font-size: 24px; }
.with-caption::cue(v[voice="geckotang"]) { color: skyblue; }
.with-caption::cue(v[voice="soto3"]) { color: pink; }
</style>
</head>
<body>
<video class="with-caption" autoplay controls muted>
<!-- 読み込む動画ファイルの指定 -->
<source src="./assets/movie.mp4" type="video/mp4">
<!-- 読み込む字幕ファイルの指定（日本語） -->
<track label="日本語" kind="captions" srclang="ja" src="./assets/6/movie-ja.vtt" type="text/vtt" default>
<!-- 読み込む字幕ファイルの指定（英語） -->
<track label="English" kind="captions" srclang="en" src="./assets/6/movie-en.vtt" type="text/vtt">
</video>
</body>
</html>
デモを見てみましょう。
デモにあるvideo要素によるブラウザネイティブの動画プレイヤーは、Chromeではプレイヤーの右下にCCというものがあり、その部分をクリックすると字幕を表示・非表示、どの言語の字幕を表示するかの選択をすることができます。その部分の日本語やEnglishとなっている部分をクリックすると、字幕を切り替えることができます。
動画のライセンス表示
この記事で使用している動画はCreative Commons Attribution 3.0によってライセンスされています。 © copyright 2008, Blender Foundation / www.bigbuckbunny.org
ここまでのまとめ
今回は、WebVTTの対応状況や基本仕様、動画への読み込みについて解説しました。字幕を表示するタイミングはシビアですので、手書きをしていくものではないとは思います。
実際に利用する際には、短い映像であれば手書きすることも考えられますが、長い映像の場合であれば、映像を見ながら字幕を入力し、トラックファイルが作成できるジェネレータなどが必要になるかもしれません。
次回は、字幕を装飾する書式について解説します。