track 要素

HTML track 要素はメディア要素 (<audio> および <video>) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定できます。トラックは WebVTT (Web Video Text Tracks) 形式 (.vtt ファイル) で整形します。

track 要素でメディアに付加するデータの種類は kind 属性で設定します。使用できる値は subtitles、captions、descriptions、chapters、metadata です。この要素は、ユーザが付加データを要求した際にブラウザが提供する時間指定テキストを含むソースフィルを指示します。

メディア要素は kind、srclang および label が同一の track を複数持つことができません。

使用可能な場所

属性

この要素はグローバル属性を持ちます。

default

この属性は、別の track が適切であるとユーザの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの track 要素のみで使用できます。

kind

どのように使用するトラックであるかをを表します。省略した場合、デフォルトの種類は subtitles です。以下のキーワードを使用できます:

• subtitles
  • 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。
  • 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。
• captions
  • クローズドキャプションは書写、あるいは音声の翻訳を提供します。
  • これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。
  • 耳が不自由なユーザや音声をミュートしている場合に適しています。
• descriptions
  • テキストによる動画コンテンツの説明です。
  • 目が不自由なユーザや動画を視聴できない場合に適しています。
• chapters
  • チャプタータイトルは、ユーザがメディアリソースの操作を行う際に使用することを意図しています。
• metadata
  • スクリプトが使用するトラック情報です。ユーザには見えません。

label

使用可能なテキストトラックを一覧表示する際にブラウザが使用する、ユーザに見せるテキストトラックのタイトルです。

src

トラック (.vtt ファイル) のアドレスです。有効な URL であることが必要です。この属性は定義しなければなりません。

srclang

テキストデータの言語です。有効な BCP 47 言語タグであることが必要です。kind 属性に subtitles を設定した場合は、srclang 属性を定義しなければなりません。

DOM インターフェイス

この要素は HTMLTrackElement インターフェイスを提供します。

例

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>

仕様

ブラウザ実装状況

[1] Android 版 Chrome では、フルスクリーンの動画で <track> 要素が動作しません。

関連情報

• WebVTT text track format