DOM：TrackEventインターフェイス

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

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

コンストラクタ

プロパティ

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

メソッド

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

例

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

var 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) {
  var 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 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。

スクリプト：

スクリプト：

DOM

インターフェイス

TrackEvent インターフェイス

コンストラクタ

プロパティ

メソッド

例

テスト