<track>: 埋め込みテキストトラック要素

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

コンテンツカテゴリ なし
許可されている内容 なし。この要素は空要素です。
タグの省略 空要素であるため開始タグは必須、また終了タグを置いてはなりません。
許可されている親要素

メディア要素、 <audio> または <video>

暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLTrackElement (en-US)

属性

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

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 です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。

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

キューの変更の検出

基本となる TextTrack は、 track プロパティで識別されますが、現在表示されているキューが変更されるたびに cuechange イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。

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

let textTrackElem = document.getElementById("texttrack");

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

また、oncuechange イベントハンドラーを使用することもできます。

let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (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>

仕様書

仕様書 状態 備考
HTML Living Standard
track element の定義
現行の標準
HTML5
track element の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報