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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
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() は HTMLMediaElement インターフェイスのメソッドで、新しい TextTrack オブジェクトを作成し、それをこのメディア要素に追加します。このメソッドは、 TextTrackList/addtrack_event イベントをこのメディア要素の HTMLMediaElement/textTracks で発行します。このメソッドは、 TextTrackList インターフェイスでは使用できません。 HTMLMediaElement でのみ使用できます。

23
12
31
6
25
6

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

23
12
31
6
25
6

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

32
14
68
10
32
10

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

33
18
31
8
33
8

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

12
31
8
8

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
7

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
6

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

23
12
31
6
25
7

addtrackイベントは、TextTrackListにトラックが追加されたときに発生します。

23
12
31
6
25
7

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

33
18
31
7
33
7

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

33
18
31
8
33
8

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

23
12
31
6
25
7

removetrack イベントは、TextTrackList からトラックが削除されたときに発生します。

33
18
31
7
33
7
その他

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

23
12
31
6
25
6
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 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 つのイベントによって反映されます。
注釈 1件
実装メモ
  • フルスクリーンのビデオでは動作しません。

基本構文

HTML
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subs-ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

ライブデモ

Caption-ready video

Attach a track element to a video so captions can be offered when a file is available.

プレビュー全画面表示

Track kinds overview

Summarize common track kinds such as captions, subtitles, and descriptions.

プレビュー全画面表示

Multilingual track plan

Show how multiple track elements can support more than one language.

プレビュー全画面表示

実務での使いどころ

  • Text tracks の活用

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

注意点

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

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。