VideoTrackList
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
VideoTrackList
インターフェイスは、<video>
要素内に含まれる映像トラックのリストを表すために使用します。 各トラックはリスト内の個別の VideoTrack
オブジェクトで表します。
HTMLMediaElement.videoTracks
を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または forEach()
などの関数を使用してアクセスできます。
インスタンスプロパティ
このインターフェイスは、その親インターフェイスである EventTarget
からプロパティを継承しています。
length
読取専用-
リスト内のトラック数。
selectedIndex
読取専用-
現在選択されているトラックがある場合はそのインデックス、それ以外の場合は
-1
。
インスタンスメソッド
このインターフェイスは、その親インターフェイスである EventTarget
からメソッドを継承しています。
getTrackById()
-
指定された文字列と
id
が一致するVideoTrackList
内で見つかったVideoTrack
を返します。 一致が見つからない場合は、null
を返します。
イベント
addtrack
-
新しい映像トラックがメディア要素に追加されたときに発生します。
onaddtrack
プロパティからも利用できます。 change
-
映像トラックがアクティブまたは非アクティブになったときに発生します。
onchange
プロパティからも利用できます。 removetrack
-
映像トラックがメディア要素から取り除かれたときに発生します。
onremovetrack
プロパティからも利用できます。
使用上の注意
VideoTrackList
を使用すると、メディア要素にある映像トラックに直接アクセスできるだけでなく、addtrack
および removetrack
イベントにイベントハンドラーを設定することができるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときを検出できます。
例
メディア要素の映像トラックリストの取得
メディア要素の VideoTrackList
を取得するには、その videoTracks
プロパティを使用します。
const videoTracks = document.querySelector("video").videoTracks;
トラック数の変化の監視
この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、 addtrack
および removetrack
イベントのためのハンドラーが設定されています。
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