TextTrack

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.

* Some parts of this feature may have varying levels of support.

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

EventTarget TextTrack

インスタンスプロパティ

このインターフェイスは EventTarget からプロパティを継承しています。

TextTrack.activeCues 読取専用

現在アクティブなテキストトラックキューのセットをリストする TextTrackCueList オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。

TextTrack.cues 読取専用

トラックのすべてのキューを含む TextTrackCueList

TextTrack.id 読取専用

トラックがある場合は、それを識別する文字列です。 ID がない場合、この値は空文字列 ("") です。 TextTrack<track> 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。

TextTrack.inBandMetadataTrackDispatchType 読取専用

文字列で、トラックの帯域内メタデータトラックディスパッチ種別を示します。

TextTrack.kind 読取専用

文字列で、 TextTrack が記述するテキストトラックの kind を示します。 値は許可されている値の何れかでなければなりません。

TextTrack.label 読取専用

テキストトラックのラベルがあれば、それを含む人間が読める文字列です。 それ以外の場合、これは空文字列 ("") になります。 空文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。

TextTrack.language 読取専用

文字列で、テキストトラックの内容が書かれているテキスト言語を指定します。 値は、HTML の lang 属性と同じように、 RFC 5646: Tags for Identifying Languages (BCP 47 とも) で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は "en-US"、ブラジルポルトガル語の場合は "pt-BR" になります。

TextTrack.mode

文字列で、トラックの現在のモードを指定します。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値はテキストトラックモード定数にリストされています。既定値は disabled ですが、 <track> 要素の default 論理属性が指定されていた場合は、既定のモードは started になります。

インスタンスメソッド

このインターフェイスは EventTarget からもメソッドを継承しています。

メモ: TextTrackCue インターフェイスは、 VTTCue などの他のキューインターフェイスの親クラスとして使用される抽象クラスです。したがって、キューを追加または削除する場合は、TextTrackCue を継承するキューの種類のいずれかを入力することになります。

TextTrack.addCue()

(TextTrackCue オブジェクトとして指定された) キューをトラックのキューのリストに追加します。

TextTrack.removeCue()

トラックのキューのリストから (TextTrackCue オブジェクトとして指定された) キューを取り除きます。

イベント

cuechange

キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。 oncuechange プロパティからも利用できます。

以下の例は、新しい TextTrack を動画に追加し、 TextTrack.mode を使用して表示するように設定します。

js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

仕様書

Specification
HTML
# texttrack

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
TextTrack
activeCues
addCue
cuechange event
cues
id
inBandMetadataTrackDispatchType
kind
label
language
mode
removeCue
sourceBuffer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.

関連情報