VideoTrackList

VideoTrackList インターフェイスは、<video> 要素内に含まれる映像トラックのリストを表すために使用します。 各トラックはリスト内の個別の VideoTrack オブジェクトで表します。

HTMLMediaElement.videoTracks を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または forEach() などの関数を使用してアクセスできます。

EventTarget VideoTrackList

インスタンスプロパティ

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

length 読取専用

リスト内のトラック数。

selectedIndex 読取専用

現在選択されているトラックがある場合はそのインデックス、それ以外の場合は -1

インスタンスメソッド

このインターフェイスは、その親インターフェイスである EventTarget からメソッドを継承しています。

getTrackById()

指定された文字列と id が一致する VideoTrackList 内で見つかった VideoTrack を返します。 一致が見つからない場合は、null を返します。

イベント

addtrack

新しい映像トラックがメディア要素に追加されたときに発生します。 onaddtrack プロパティからも利用できます。

change

映像トラックがアクティブまたは非アクティブになったときに発生します。 onchange プロパティからも利用できます。

removetrack

映像トラックがメディア要素から取り除かれたときに発生します。 onremovetrack プロパティからも利用できます。

使用上の注意

VideoTrackList を使用すると、メディア要素にある映像トラックに直接アクセスできるだけでなく、addtrack および removetrack イベントにイベントハンドラーを設定することができるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときを検出できます。

メディア要素の映像トラックリストの取得

メディア要素の VideoTrackList を取得するには、その videoTracks プロパティを使用します。

js
const videoTracks = document.querySelector("video").videoTracks;

トラック数の変化の監視

この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、 addtrack および removetrack イベントのためのハンドラーが設定されています。

js
videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = videoTracks.length;
  drawTrackCountIndicator(trackCount);
}

仕様書

Specification
HTML Standard
# audiotracklist-and-videotracklist-objects

ブラウザーの互換性

BCD tables only load in the browser