TrackEvent

Интерфейс TrackEvent API HTML DOM используется для событий, которые представляют изменения в наборе доступных дорожек на элементе HTML-медиа; эти события addtrack и removetrack.

Важно не путать TrackEvent с интерфейсом RTCTrackEvent, который используется для дорожек, являющихся частью RTCPeerConnection.

События, основанные на TrackEvent, всегда отправляются в один из типов списков медиа-дорожек:

• События, связанные с видеодорожками, всегда отправляются в VideoTrackList, найденный в HTMLMediaElement.videoTracks
• События, связанные с аудиодорожками, всегда отправляются в AudioTrackList, указанный в HTMLMediaElement.audioTracks
• События, влияющие на текстовые дорожки, отправляются в объект TextTrackList, указанный в HTMLMediaElement.textTracks.

TrackEvent()

Создаёт и инициализирует новый объект TrackEvent с указанным типом события, а также с необязательными дополнительными свойствами.

TrackEvent основан на Event, поэтому свойства Event также доступны для объектов TrackEvent.

track Только для чтения

Объект DOM-дорожки, к которой относится событие. Если это не null, это всегда объект одного из типов медиа-дорожек: AudioTrack, VideoTrack или TextTrack.

TrackEvent не имеет собственных методов; однако, он основан на Event, поэтому предоставляет методы, доступные для объектов Event.

В этом примере создаётся функция handleTrackEvent(), которая вызывается для любого события addtrack или removetrack на первом элементе <video>, найденном в документе.

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 = "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, чтобы определить, на каком типе дорожки произошло событие, а затем выводит сообщение в консоль, указывающее, какой это тип дорожки и добавляется ли она или удаляется из элемента.