TrackEvent

TrackEvent 介面是 HTML DOM API 的一部分,用於表示 HTML 媒體元素上可用軌道集合發生變化的事件;這些事件是 addtrackremovetrack

請注意不要將 TrackEventRTCTrackEvent 介面混淆,後者用於表示屬於 RTCPeerConnection 的軌道。

基於 TrackEvent 的事件總是傳送到以下一種媒體軌道列表型別:

Event TrackEvent

建構函式

TrackEvent()

建立並初始化一個新的 TrackEvent 物件,指定事件型別以及可選的附加屬性。

例項屬性

TrackEvent 基於 Event,因此 Event 的屬性在 TrackEvent 物件上也是可用的。

track 只讀

事件引用的 DOM 軌道物件。如果不是 null,則始終是以下媒體軌道型別之一的物件:AudioTrackVideoTrackTextTrack)。

例項方法

TrackEvent 本身沒有方法;但是,它繼承自 Event,因此它提供了 Event 物件上可用的方法。

示例

此示例設定了一個名為 handleTrackEvent() 的函式,該函式會在文件中找到的第一個 <video> 元素上處理任何 addtrackremovetrack 事件。

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

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

function handleTrackEvent(event) {
  let trackKind;

  if (event.target instanceof VideoTrackList) {
    trackKind = "video";
  } else if (event.target instanceof AudioTrackList) {
    trackKind = "audio";
  } else if (event.target instanceof TextTrackList) {
    trackKind = "text";
  } else {
    trackKind = "unknown";
  }

  switch (event.type) {
    case "addtrack":
      console.log(`Added a ${trackKind} track`);
      break;
    case "removetrack":
      console.log(`Removed a ${trackKind} track`);
      break;
  }
}

事件處理程式使用 JavaScript 的 instanceof 運算子來確定事件發生在哪種型別的軌道上,然後向控制檯輸出一條訊息,指示軌道的型別以及它是被新增到元素中還是從元素中移除。

規範

規範
HTML
# the-trackevent-interface

瀏覽器相容性