TrackEvent

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

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

コンストラクタ

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

プロパティ

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

track 読取専用
イベントが参照している DOM のトラックオブジェクト。 null でない場合、これは常にメディアトラックの種類のうちの1つのオブジェクト(AudioTrackVideoTrack、または TextTrack)です。

メソッド

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

仕様

仕様 状態 コメント
HTML Living Standard
TrackEvent の定義
現行の標準 初期定義
HTML5
TrackEvent の定義
勧告 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
TrackEventChrome 完全対応 ありEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
trackChrome 完全対応 ありEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明