HTMLMediaElement: textTracks プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

textTracks は HTMLMediaElement オブジェクトの読み取り専用プロパティで、メディア要素のテキストトラックを表す TextTrackList オブジェクトをすべて、テキストトラックのリストと同じ順序で掲載しているオブジェクトを返します。

addtrack と removetrack イベントを使用すると、<audio> や <video> 要素へのトラックの追加や削除を検出することができます。しかし、これらのイベントはメディア要素自体に直接送られるわけではありません。代わりに、要素に追加されたトラックの種類に対応する HTMLMediaElement のトラックリストオブジェクトに送られます。

返されたリストは生きています。つまり、メディア要素にトラックが追加されたり削除されたりすると、リストのコンテンツは動的に変更されます。一度リストへの参照を保有すると、新しいテキストトラックが追加されたり、既存のものが削除されたりしたときにそれを検出するために、変更を監視することができます。

メディア要素のトラックリストの変更を監視する方法については、TextTrackList のイベントを参照してください。

値

メディア要素に含まれるテキストトラックのリストを表す TextTrackList オブジェクトです。トラックのリストは、textTracks[n] を使用してこのオブジェクトのテキストトラックのリストから n 番目のテキストトラックを取得したり、 textTracks.getTrackById() メソッドを使用してアクセスしたりすることができます。

それぞれのトラックは TextTrack オブジェクトで表され、トラックに関する情報を提供します。

例

<video> に子要素としていくつかの <track> が含まれているものから始めましょう。

html
<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" />
</video>

HTMLMediaElement.textTracks は反復処理中に textTracksList を返します。ここでは、それぞれの英語トラックのすべてのプロパティをコンソールに表示しています。

js
const tracks = document.querySelector("video").textTracks;

for (const track of tracks) {
  if (track.language === "en") {
    console.dir(track);
  }
}

仕様書

Specification
HTML
# dom-media-texttracks-dev

ブラウザーの互換性

関連情報