HTMLMediaElement.textTracks

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

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

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

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

値

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

それぞれのトラックは 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 を返すので、それを反復処理することができます。ここでは、それぞれの英語トラックのすべてのプロパティをコンソールに表示しています。

const tracks = document.querySelector('video').textTracks;

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

仕様書

Specification
HTML Standard # dom-media-texttracks-dev

ブラウザーの互換性

BCD tables only load in the browser

値

例

仕様書

ブラウザーの互換性

関連情報