TrackEvent | Web API

在此页

构造函数
特性
方法
范例
规范
浏览器兼容性
相关话题

TrackEvent interface, which is part of the HTML DOM specification, is used for events which represent changes to a set of available tracks on an HTML media element; these events are addtrack and removetrack . It's important not to confuse TrackEvent 采用 RTCTrackEvent interface, which is used for tracks which are part of an RTCPeerConnection .

Events based on TrackEvent are always sent to one of the media track list types:

Events involving video tracks are always sent to the VideoTrackList found in HTMLMediaElement.videoTracks
Events involving audio tracks are always sent to the AudioTrackList specified in HTMLMediaElement.audioTracks
Events affecting text tracks are sent to the TextTrackList object indicated by HTMLMediaElement.textTracks .

构造函数

TrackEvent(): Creates and initializes a new TrackEvent object with the event type specified, as well as optional additional properties.

特性

TrackEvent 基于 事件 , so properties of 事件 are also available on TrackEvent 对象。

track 只读: The DOM track object the event is in reference to. If not null , this is always an object of one of the media track types: AudioTrack , VideoTrack ，或 TextTrack ).

方法

TrackEvent has no methods of its own; however, it is based on 事件 , so it provides the methods available on 事件 对象。

范例

This example sets up a function, handleTrackEvent() , which is callled for any addtrack or removetrack event on the first <video> element found in the document.

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 = "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;
  }
}

The event handler uses the JavaScript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element.

规范

规范	状态	注释
HTML 实时标准 The definition of 'TrackEvent' in that specification.	实时标准	初始定义。
HTML5 The definition of 'TrackEvent' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`TrackEvent`	Chrome Yes	Edge ≤79	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`track`	Chrome Yes	Edge ≤79	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?

元数据

最后修改： Jun 16, 2019

在此页

构造函数

特性

方法

范例

规范

浏览器兼容性

图例

相关话题