VideoTrackList
VideoTrackList
インターフェイスは、<video>
要素内に含まれる動画トラックのリストを表すために使用します。 各トラックはリスト内の個別の VideoTrack
オブジェクトで表します。
HTMLMediaElement.videoTracks
を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または forEach()
などの関数を使用してアクセスできます。
プロパティ
このインターフェイスは、その親インターフェイスである EventTarget
からもプロパティを継承します。
length
読取専用- リスト内のトラック数。
selectedIndex
読取専用- 現在選択されているトラックがある場合はそのインデックス、それ以外の場合は
-1
。
イベントハンドラー
onaddtrack
addtrack
イベントが発生したときに呼び出されるイベントハンドラー。 新しい動画トラックがメディア要素に追加されたことを示します。onchange
change (en-US)
イベントが発生したときに呼び出されるイベントハンドラー。 つまりトラックのselected
プロパティの値が変更されて、トラックがアクティブまたは非アクティブになったときです。onremovetrack
removetrack
イベントが発生したときに呼び出されるイベントハンドラー。 動画トラックがメディア要素から取り除かれたことを示します。
メソッド
このインターフェイスは、その親インターフェイスである EventTarget
からもメソッドを継承しています。
getTrackById()
- 指定された文字列と
id
が一致するVideoTrackList
内で見つかったVideoTrack
を返します。 一致が見つからない場合は、null
を返します。
イベント
addtrack
- 新しい動画トラックがメディア要素に追加されたときに発生します。
onaddtrack
プロパティからも利用できます。 change
- 動画トラックがアクティブまたは非アクティブになったときに発生します。
onchange
プロパティからも利用できます。 removetrack
- 動画トラックがメディア要素から取り除かれたときに発生します。
onremovetrack
プロパティからも利用できます。
使用上の注意
VideoTrackList
を使用すると、メディア要素にある動画トラックに直接アクセスできるだけでなく、addtrack
イベントと removetrack
イベントにイベントハンドラを設定できるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときに検出できます。 詳細と例については、onaddtrack
と onremovetrack
を参照してください。
例
メディア要素の動画トラックリストの取得
メディア要素の VideoTrackList
を取得するには、その videoTracks
プロパティを使用します。
var videoTracks = document.querySelector("video").videoTracks;
トラック数の変化の監視
この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、addtrack
と removetrack
イベントのためのハンドラが設定されています。
videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
trackCount = videoTracks.length;
drawTrackCountIndicator(trackCount);
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard VideoTrackList の定義 |
現行の標準 |
ブラウザーの互換性
BCD tables only load in the browser