動画や音声のテキストトラックを指定する

track要素は、動画や音声に対するテキストトラック（字幕など）を指定します。この要素は、video要素またはaudio要素の子要素として使用します。

• audio要素に対するテキストトラックは、現時点ではほとんどのブラウザで対応していないようです。

テキストトラックの指定方法

テキストトラックファイルのURLを、src属性で指定します。例えば次のように記述した場合は、example.vtt が読み込まれることになります。

<track src="example.vtt" srclang="ja">

• テキストトラックファイルは、WebVTT（Web Video Text Tracks）形式で作成します。拡張子は .vtt になります。
• 基本的には、動画等を埋め込む文書とテキストトラックファイルは、同一のオリジンに置かれている必要があります。

track要素の配置位置

track要素は、video要素（またはaudio要素）内のsource要素よりも後、かつ代替コンテンツよりも前に配置する必要があります。

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

<track src="example_ja.vtt" srclang="ja" label="日本語字幕" default>
<track src="example_en.vtt" srclang="en" label="English Subtitles">
<track src="example_cap.vtt" kind="captions" srclang="ja" label="難聴用キャプション">

代替コンテンツはtrack要素の後に配置します。

</video>

上記のように、必要に応じて複数のtrack要素を配置することもできます。この例では、1つ目のtrack要素は日本語版の字幕（デフォルトで有効）、2つ目は英語版の字幕、3つ目は音声を聞くことができない場合のキャプションを指定しています。

kind属性について

kind属性は、テキストトラックの種類を指定します。

<track src="example_ja.vtt" kind="subtitles" srclang="ja">

指定できる値は次の5つです。

subtitles （属性省略時の既定値）

翻訳の字幕： 音声は聞こえるが、その言語が理解できない場合の字幕です。英語の動画に日本語の字幕を入れる場合などに使用します。

captions

難聴用のキャプション： 音声を聴くことができない場合のキャプションです（会話やナレーションの書き起こし、効果音の説明など）。耳の不自由な人や、無音声で見る人への字幕として使用します。※キャプションとして作成するのであれば、翻訳版もこの種類に含まれます。

descriptions

音声合成用のテキスト： 映像を見ることができない場合のテキストです（映像の内容を説明するテキストで、音声合成で出力されることを想定したもの）。目の不自由な人や、スクリーンを見ずに利用する人への音声として使用します。

chapters

チャプタータイトル： 頭出し用のタイトルです。このタイトルがインターフェース上に表示され、シーンの切り替え操作を行えるようになります。

metadata

スクリプト用のトラック情報： スクリプトから利用するためのトラックです。これはインターフェース上には表示されません。

srclang属性について

srclang属性は、テキストトラックの記述言語を指定します。この属性は、トラックの種類が翻訳の字幕（subtitles）の場合は必須となります。

<track src="example_ja.vtt" srclang="ja">

• kind属性を省略した場合にも、srclang属性が必須となります。（kind属性の既定値が subtitles なので）

label属性について

label属性は、テキストトラックのタイトルを指定します。このタイトルは、各トラック（subtitles、captions、descriptions）をインターフェース上に一覧表示する際に使用されます。

<track src="example_ja.vtt" srclang="ja" label="日本語字幕">

• この属性を指定する場合は、値が空であってはなりません。
• この属性を省略した場合は、タイトルの内容はブラウザ側に任されることになります。

default属性について

default属性は、そのテキストトラックがデフォルトで有効になるように指定します。

<track src="example_ja.vtt" srclang="ja" default>

ただし、次のような状態にある各track要素は、1つのvideo要素（またはaudio要素）内に1つだけしか配置できません。

• kind属性が subtitles または captions 状態で、かつdefault属性が指定されたtrack要素。
• kind属性が descriptions 状態で、かつdefault属性が指定されたtrack要素。
• kind属性が chapters 状態で、かつdefault属性が指定されたtrack要素。

• kind属性が metadata 状態で、かつdefault属性が指定されたtrack要素の場合は、配置数に制限はありません。

配置に関する注意事項

kind属性、srclang属性、label属性、この3つの指定内容の組み合わせは、1つのvideo要素（またはaudio要素）内で重複させてはなりません。

次の例では、双方のkind属性、srclang属性、label属性の指定内容が全て同じなので、誤りということになります。

<video src="example.mp4">

<track src="example1.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>
<track src="example2.vtt" kind="subtitles" srclang="ja" label="日本語字幕">

</video>

同じ理由から、次の例も誤りということになります。（双方とも同じ属性を省略しています）

<video src="example.mp4">

<track src="example1.vtt" srclang="ja" default>
<track src="example2.vtt" srclang="ja">

</video>

WebVTTファイルに関して

以下は、WebVTTファイルの作成に関する必要最小限の説明となります。

• 詳細を知りたい方は、MDNのWeb ビデオテキストトラックフォーマット (WebVTT)（外部サイト）をご覧ください。分かりやすく解説されています。

WebVTTファイルの内容は、次のような感じで記述します。このファイルをUTF-8で作成し、拡張子に .vtt を指定して保存すると、テキストトラックとして読み込めるようになります。

WEBVTT

00:01.000 --> 00:05.000
最初の字幕テキスト

00:07.000 --> 00:11.000
次の字幕テキスト
複数行で表示することも可能

00:13.000 --> 00:17.000
最後の字幕テキスト

• 最初に WEBVTTと記述して、その後に空白行を入れます。
• 00:01.000 --> 00:05.000といった部分は、その字幕を表示する時間を表します。（この例では、1秒目から5秒目まで表示）
• 時間指定の下は、字幕として表示するテキストになります。（改行を入れることで複数行の字幕を表示することも可能）
• それぞれの字幕は空白行で区切ります。

時間指定の後に各種のオプションを設定することで、字幕の表示位置や縦書きなどを指定することもできます。（興味のある方は前述のリンク先をご覧ください）