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

試してみましょう

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    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

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

kind

テキストトラックの使用方法を示します。省略された場合、デフォルトの種別は subtitles となります。この属性に不正な値が指定された場合、metadata が使用されます。 以下のキーワードが利用できます。

subtitles

字幕です。台詞の文字起こしや翻訳を提供します。英語圏の映画で英語以外の言語が話されたり、テキストが表示されたりする場合など、音は利用できるものの内容が理解できない場合に適しています。字幕には、通常は追加の背景情報といった、追加の内容が含まれることもあります。例えば、スター・ウォーズ映画の冒頭にあるテキストや、シーンの日時や場所などが挙げられます。字幕の情報は、音声と映像を補完するものです。多くの場合、動画自体に埋め込まれていますが、特に映画全体の翻訳の場合など、同時に提供されることもあります。

captions

クローズドキャプションです。台詞、効果音、関連する音楽、ソース（登場人物や環境など）といった関連する音声情報の文字起こしや翻訳を提供します。これは、音声が利用できない場合や、はっきりと聞き取れない場合（例えば、ミュートされている、周囲の騒音にかき消されている、あるいはユーザーが聴覚障碍者である場合など）に適しています。

descriptions

説明文です。メディアリソースの video 要素を要約したものです。これらは、視覚的な要素が隠れていたり、利用できない、あるいは使用できない場合（例えば、ユーザーが運転中に画面を見ずにアプリケーションを操作している場合や、視覚障害がある場合など）に、音声として合成されることを意図しています。

chapters

チャプタータイトルです。ユーザーがメディアリソースの操作を行う際に使用するためのものです。

metadata

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

label

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

src

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

srclang

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

使用上の注意

トラックのデータの種類

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

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

キューの変更の検出

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

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

let textTrackElem = document.getElementById("text-track");

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

プログラムでテキストトラックを追加

JavaScript で <track> 要素を表すインターフェイスは、HTMLTrackElement です。 要素に関連付けられたテキストトラックは、HTMLTrackElement.track プロパティから取得でき、その型は TextTrack です。

TextTrack オブジェクトは、HTMLVideoElement または HTMLAudioElement 要素に、HTMLMediaElement.addTextTrack() メソッドを使用して追加することもできます。 メディア要素に関連付けられた TextTrack オブジェクトは、TextTrackList に格納され、HTMLMediaElement.textTracks プロパティを使用して取得できます。

例

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