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

試してみましょう

<video controls src="/shared-assets/videos/friday.mp4">  <track    default    kind="captions"    srclang="en"    src="/shared-assets/misc/friday.vtt" />  Download the  <a href="/shared-assets/videos/friday.mp4">MP4</a>  video, and  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.</video>

video {  width: 250px;}video::cue {  font-size: 1rem;}

属性

この要素にはグローバル属性があります。

default

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

kind

どのように使用するトラックであるかをを表します。省略した場合、既定の種類はsubtitles です。属性に無効な値が含まれている場合はmetadata を使用します (バージョン 52 より前の Chrome は、無効な値をsubtitles として扱っていました)。以下のキーワードが利用できます。

• subtitles

  • 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。
  • 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。

• captions

  • クローズドキャプションは書写、あるいは音声の翻訳を提供します。
  • これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。
  • 耳が不自由なユーザーや音声をミュートしている場合に適しています。

• descriptions

  • テキストによる動画コンテンツの説明です。
  • 目が不自由なユーザーや動画を視聴できない場合に適しています。

• chapters

  • チャプタータイトルは、ユーザーがメディアリソースの操作を行う際に使用することを意図しています。

• metadata

  • スクリプトが使用するトラック情報です。ユーザーには見えません。

label

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

src

トラック（.vtt ファイル）のアドレスです。有効な URL であることが必要です。この属性は定義する必要があり、 URL の値は文書として —track 要素の親要素である<audio> または<video> がcrossorigin 属性を持たない限り — 同じオリジンを持たなければなりません。

srclang

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

使用上の注意

トラックのデータの種類

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

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

キューの変更の検出

配下にあるTextTrack はtrack プロパティで示され、現在表示されているキューが変更される度にcuechange イベントを受信します。これは、このトラックがメディア要素に関連付けられていない場合でも発生します。

このトラックがメディア要素に関連付けられている場合、<track> を<audio> または<video> 要素の子として使用すると、cuechange イベントはHTMLTrackElement にも送信されます。

let textTrackElem = document.getElementById("texttrack");textTrackElem.addEventListener("cuechange", (event) => {  let cues = event.target.track.activeCues;});

例

<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>

仕様書

ブラウザーの互換性

関連情報

• WebVTT テキストトラック形式
• HTMLMediaElement.textTracks