Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Text tracks

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

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

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

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

メディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
textTracks
23
12
31
6
25
6
HTML 要素
<track>

は HTML の要素で、メディア要素 (audio および video) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。トラックは WebVTT 形式 (.vtt ファイル) を用います。
23
12
31
6
25
6
HTML 属性
default
23
12
31
6
25
6
kind
23
12
31
6
25
6
label
23
12
31
6
25
6
src
23
12
50
6
25
6
srclang
23
12
31
6
25
6
DOM API
addTextTrack

addTextTrack() は HTMLMediaElement インターフェイスのメソッドで、新しい TextTrack オブジェクトを作成し、それをこのメディア要素に追加します。このメソッドは、 TextTrackList/addtrack_event イベントをこのメディア要素の HTMLMediaElement/textTracks で発行します。このメソッドは、 TextTrackList インターフェイスでは使用できません。 HTMLMediaElement でのみ使用できます。
23
12
31
6
25
6
HTMLTrackElement

HTMLTrackElement インターフェイスは DOM 内にある HTML の track 要素を表します。この要素は audio または video の子として使用され、クローズドキャプションや字幕などの情報を含むテキストトラックを指定することが可能です。
23
12
31
6
25
6
cuechange_event

cuechange イベントは TextTrack が現在表示しているキューを変更した際に発生します。このイベントは TextTrack と、それが表示されている HTMLTrackElement があれば、その両方で発生します。
32
14
68
10
32
10
default

HTMLTrackElement インターフェースの default プロパティは、ユーザーの好みが他のトラックの方が適切であることを示していない場合に、トラックを有効にするかどうかを表します。これは track 要素の boolean default 属性を反映し、存在すれば真を、そうでなければ偽を返します。
23
12
31
6
25
6
kind

HTMLTrackElement インターフェースの kind プロパティは、トラックの種類、つまりテキストトラックがどのように使われるかを表します。これは track 要素の列挙された kind 属性を反映します。
23
12
31
6
25
6
label

HTMLTrackElement の label プロパティは、トラックの字幕、キャプション、音声説明を一覧表示する際に表示される、ユーザーが読みやすいタイトルを表します。これは track 要素の label 属性を反映します。
23
12
31
6
25
6
readyState

HTMLTrackElement インターフェースの readyState 読み取り専用プロパティは、track 要素のテキストトラック準備状態を表す数値を返します：
23
12
31
6
25
6
src

HTMLTrackElement.src プロパティは、テキストトラックのデータの URL を示す track 要素の src 属性の値を反映したものです。
23
12
31
6
25
6
srclang

HTMLTrackElement インターフェースの srclang プロパティは、track 要素の srclang 属性の値を反映します。
23
12
31
6
25
6
track

HTMLTrackElement インターフェースの track 読み取り専用プロパティは、track 要素のテキストトラックに対応する TextTrack オブジェクトを返します。
23
12
31
6
25
6
TextTrack

TextTrack インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の track 要素に関連付けられたテキストトラックを記述および制御します。
23
12
31
6
25
7
activeCues

activeCues は TextTrack インターフェイスの読み取り専用プロパティで、現在アクティブなキューを列挙した TextTrackCueList オブジェクトを返します。
23
12
31
6
25
7
addCue

addCue() は TextTrack インターフェイスのメソッドで、新しいキューをキューのリストへ追加します。
23
12
31
6
25
7
cuechange_event

cuechange イベントは、 TextTrack が現在表示しているキューが変更されたときに発生します。このイベントは、表示されているものがあれば、 TextTrack および HTMLTrackElement の両方に発生します。
23
12
31
6
25
7
cues

cues は TextTrack インターフェイスの読み取り専用プロパティで、トラックのこのすべてのキューが入った TextTrackCueList オブジェクトを返します。
23
12
31
6
25
7
id

id は TextTrack インターフェイスの読み取り専用プロパティで、このトラックの ID があれば、それを返します。
33
18
31
8
33
8
inBandMetadataTrackDispatchType

inBandMetadataTrackDispatchType は TextTrack インターフェイスの読み取り専用プロパティで、この TextTrack オブジェクトが表すテキストトラックの帯域内メタデータディスパッチ種別を返します。
12
31
8
8
kind

kind は TextTrack インターフェイスの読み取り専用プロパティで、このオブジェクトが表すテキストトラックの種類を返します。 これは、ユーザーエージェントがトラックをどのように処理するかを決定します。
23
12
31
6
25
7
label

label は TextTrack インターフェイスの読み取り専用プロパティで、このテキストトラックの人間可読なラベルがあれば、それを返します。
23
12
31
6
25
7
language

language は TextTrack インターフェイスの読み取り専用プロパティで、このテキストトラックの言語を返します。
23
12
31
6
25
7
mode

TextTrack インターフェイスの mode プロパティは、テキストトラックのモードを指定して制御する disabled, hidden, showing のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。
23
12
31
6
25
7
removeCue

removeCue() は TextTrack インターフェイスのメソッドで、キューのリストからキューを取り除きます。
23
12
31
6
25
7
TextTrackCue

TextTrackCue は抽象クラスで、 VTTCue などの派生キュー型の基礎として使用されます。代わりに、これらの派生型を使用して作業することになります。これらのキューは、 TextTrack の再生中にある時間だけ表示される文字列を表します。キューには、開始時刻（テキストが表示される時刻）と終了時刻（テキストが表示されなくなる時刻）、およびその他の情報を記載します。
23
12
31
6
25
7
endTime

endTime は TextTrackCue インターフェイスのプロパティで、キューの終了時刻を返したり設定したりします。
23
12
31
6
25
7
enter_event

enter イベントは、キューがアクティブになったときに発行されます。字幕やキャプションの場合、メディア上に表示されるタイミングです。
23
12
31
6
25
7
exit_event

exit イベントは、キューがアクティブでなくなったときに発行されます。
23
12
31
6
25
7
id

id は TextTrackCue インターフェイスのプロパティで、このキューの識別子を返したり設定したりします。
23
12
31
6
25
7
pauseOnExit

pauseOnExit は TextTrackCue インターフェイスのプロパティで、このキューが適用される範囲の終わりに達したとき、メディアの再生を一時停止すべきかどうかを示すフラグを返したり設定したりします。
23
12
31
6
25
7
startTime

startTime は TextTrackCue インターフェイスのプロパティで、このキューの開始時刻を返したり設定したりします。
23
12
31
6
25
7
track

track は TextTrackCue インターフェイスの読み取り専用プロパティで、このキューが所属する TextTrack オブジェクトを返します。
23
12
31
6
25
7
TextTrackCueList

TextTrackCueList は配列風オブジェクトで、動的に更新される TextTrackCue オブジェクトのリストを表します。
23
12
31
6
25
6
getCueById

getCueById() は TextTrackCueList インターフェイスのメソッドで、TextTrackCueList オブジェクトが表すリストの中で、識別子が id の値と一致する最初の VTTCue を返します。
23
12
31
6
25
6
length

length は TextTrackCueList インターフェイスの読み取り専用プロパティで、リスト中のキューの数を返します。
23
12
31
6
25
6
TextTrackList

TextTrackListインターフェイスは、関連するビデオまたはオーディオ要素に定義されたテキストトラックのリストを表すために使用され、各トラックはリスト内の別々のTextTrackオブジェクトによって表されます。
23
12
31
6
25
7
addtrack_event

addtrackイベントは、TextTrackListにトラックが追加されたときに発生します。
23
12
31
6
25
7
change_event

changeイベントは、テキストトラックがアクティブまたは非アクティブになったとき、またはTextTrackListが変更されたときに発生します。
33
18
31
7
33
7
getTrackById

TextTrackList メソッド getTrackById() は、トラックリストから、指定された文字列と ID が一致する最初の TextTrack オブジェクトを返します。これにより、ID 文字列がわかっていれば、指定されたトラックを見つけることができます。
33
18
31
8
33
8
length

読み取り専用のTextTrackListプロパティのlengthは、TextTrackListのエントリ数を返し、各エントリはメディア要素の1トラックを表すTextTrackである。
23
12
31
6
25
7
removetrack_event

removetrack イベントは、TextTrackList からトラックが削除されたときに発生します。
33
18
31
7
33
7
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • フルスクリーンのビデオでは動作しません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (50)
実装メモ
  • Firefox 50以前では、`src`を設定してもエラーにはなりませんでしたが、うまくいきませんでした。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (26)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (26)
注釈 1件
実装メモ
  • Firefox 50 以前では、テキストトラックは `<track>` 要素がドキュメント内にある場合にのみ読み込まれました。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (32)
実装メモ
  • oncuechange`イベントハンドラプロパティはサポートされていません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (10)
実装メモ
  • oncuechange`イベントハンドラプロパティはサポートされていません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (32)
実装メモ
  • oncuechange`イベントハンドラプロパティはサポートされていません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (10)
実装メモ
  • oncuechange`イベントハンドラプロパティはサポートされていません。
注釈 1件
実装メモ
  • Firefox 50以前では、`src`プロパティを設定しても正しく動作しませんでした。
注釈 1件
実装メモ
  • Firefox 50 より前のバージョンでは、1 つ以上のビデオトラックが再生されていないメディアを再生すると、キャプションが表示されませんでした。
注釈 1件
実装メモ
  • Firefox 69から、 `TextTrack` の `mode` が `disabled` の場合にキューが正しく読み込まれないことがなくなりました。
注釈 1件
実装メモ
  • Firefox 69から、 `TextTrack` の `mode` が `disabled` の場合にキューが正しく読み込まれないことがなくなりました。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
実装メモ
  • Firefox 52 以前では、JavaScript を使用してメディア要素の一部であるテキストトラックのモードを変更すると、Firefox のイベントループを 1 回通過する間に複数の変更が行われた場合でも、変更ごとに要素の textTracks TextTrackList に 1 つの変更イベントが送信されました。Firefox 52 では、これらの変更は 1 つのイベントによって反映されます。

基本構文

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

for (const track of tracks) {
  track.mode = "showing";
}

実務での使いどころ

  • Text tracks の活用

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

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク