TrackEvent

TrackEvent インターフェイスは HTML DOM 仕様の一部であり、 HTML のメディア要素で使用可能なトラックのセットに対する変更を表すイベントに使用されます。 これらのイベントは addtrack と removetrack です。

TrackEvent を RTCTrackEvent インターフェイスと混同しないでください。そちらは RTCPeerConnection の一部であるトラックに使用されます。

TrackEvent に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。

Event TrackEvent

コンストラクター

TrackEvent()

指定されたイベント種別とオプションの追加プロパティで、新しい TrackEvent オブジェクトを作成して初期化します。

インスタンスプロパティ

TrackEvent は Event に基づいているため、Event のプロパティは TrackEvent オブジェクトでも利用できます。

track 読取専用

イベントが参照している DOM のトラックオブジェクト。 null でない場合、これは常にメディアトラックの種類のうちの 1 つのオブジェクト（AudioTrack、VideoTrack、 TextTrack）です。

インスタンスメソッド

TrackEvent には独自のメソッドはありません。 しかし、それは Event に基づいているので、Event オブジェクトで利用可能なメソッドを提供します。

例

この例では、 handleTrackEvent() 関数を設定します。 この関数は、文書内で見つかった最初の <video> 要素の addtrack イベントまたは removetrack イベントに対して呼び出されます。

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

videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);

function handleTrackEvent(event) {
  let trackKind;

  if (event.target instanceof VideoTrackList) {
    trackKind = "映像";
  } else if (event.target instanceof AudioTrackList) {
    trackKind = "音声";
  } else if (event.target instanceof TextTrackList) {
    trackKind = "テキスト";
  } else {
    trackKind = "不明な";
  }

  switch (event.type) {
    case "addtrack":
      console.log(trackKind + "トラックが追加されました。");
      break;
    case "removetrack":
      console.log(trackKind + "トラックが取り除かれました。");
      break;
  }
}

イベントハンドラーは、 JavaScript の instanceof 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。

仕様書

Specification
HTML Standard
# the-trackevent-interface

ブラウザーの互換性

BCD tables only load in the browser