<track>タグの解説
<track>は、音声（<audio>）や動画（<video>）コンテンツにテキストトラックを提供します。このタグを用いることで、メディアの埋め込み要素にキュー、字幕、キャプション、メタデータ等を簡単に追加することができます。
表示するテキストトラックは、src属性を使ってWebVTT（.vtt）形式で保存された外部ファイルを指定します。キューデータや字幕などの情報をメディアファイルと切り離した状態で管理することで、コンテンツに柔軟性と拡張性を持たせることができます。
<track>タグの特徴
- この要素は、
<audio>および<video>の中に設置可能です。それ以外では機能しません。 - レイアウトには影響を与えません。メディアソースに対してテキストデータを与えます。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
<track>要素に指定できる属性
src- テキストトラック（.vtt）を読み込む有効なURLを指定します。親要素の
<audio>または<video>にcrossorigin属性が指定されていない限り、同一オリジンを持たなければなりません。 kind- テキストトラックの種類をキーワードで指定します。初期値は
"subtitles"です。subtitles：視聴者が理解できない音声の字幕を表します。captions：書写や音声の翻訳を表します。音声のキューやソースを表す場合もあります。descriptions：コンテンツの説明文を表します。chapters：ユーザーがメディアを操作する場合の指標となるチャプターを表します。metadata：スクリプトが使用するメタデータを表します。
srclang- テキスデータの言語を指定します。IETF言語タグで定義された形式を受け入れます。
label- テキストトラックの名前を指定します。ブラウザが利用可能なテキストトラックを一覧表示する際に使用されます。
default- 複数のテキストトラックが存在する場合に、優先的に使用するものを指定します。格メディア要素に一つだけ指定でき、ユーザー自身が別のトラックを指定している場合は無効になります。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<track>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。テキストトラックは、メディア埋め込み要素である<audio>または<video>の子要素として配置します。
<video src="file" controls>
<track src="file.vtt">
</video>
テキストトラックの使用用途を明示するには、適切な属性を追加する必要があります。
<track src="file.vtt" kind="chapters" srclang="en" label="Chapter1">
それでは、一つの動画コンテンツに複数のテキストトラックを配置する例を見てみましょう。以下の内容は、英語音声の動画に日本語字幕の追加を想定したものです。参照先のWebVTT（Web Video Text Tracks）形式のファイル（.vtt）の記述例も掲載します。
<video controls width="640" height="480">
<source src="vtr.webm" type="video/webm">
<source src="vtr.mp4" type="video/mp4">
<track src="descriptions.vtt" kind="descriptions" srclang="en">
<track src="vtr_en.vtt" kind="captions" srclang="en" label="English captions" default>
<track src="vtr_ja.vtt" kind="captions" srclang="ja" label="Japanese captions">
<p>お使いのブラウザではこの動画を再生できません。</p>
</video>
// WebVTTの記述例
1
00:00:10.000 --> 00:00:13.000
- 1のタイミングで表示するキャプション内容
2
00:00:13.100 --> 00:00:18.800
- 2のタイミングで表示するキャプション内容
3
00:00:20.000 --> 00:00:25.000
- 3のタイミングで表示するキャプション内容