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.
TextTrack
インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の <track>
要素に関連付けられたテキストトラックを記述および制御します。
インスタンスプロパティ
このインターフェイスは 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
を使用して表示するように設定します。
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
仕様書
Specification |
---|
HTML Standard # texttrack |
ブラウザーの互換性
BCD tables only load in the browser