TrackEvent
TrackEvent 介面是 HTML DOM API 的一部分,用於表示 HTML 媒體元素上可用軌道集合發生變化的事件;這些事件是 addtrack 和 removetrack。
請注意不要將 TrackEvent 與 RTCTrackEvent 介面混淆,後者用於表示屬於 RTCPeerConnection 的軌道。
基於 TrackEvent 的事件總是傳送到以下一種媒體軌道列表型別:
- 涉及影片軌道的事件總是傳送到
HTMLMediaElement.videoTracks中找到的VideoTrackList。 - 涉及音訊軌道的事件總是傳送到
HTMLMediaElement.audioTracks中指定的AudioTrackList。 - 影響文字軌道的事件會發送到
HTMLMediaElement.textTracks指向的TextTrackList物件。
建構函式
TrackEvent()-
建立並初始化一個新的
TrackEvent物件,指定事件型別以及可選的附加屬性。
例項屬性
TrackEvent 基於 Event,因此 Event 的屬性在 TrackEvent 物件上也是可用的。
track只讀-
事件引用的 DOM 軌道物件。如果不是
null,則始終是以下媒體軌道型別之一的物件:AudioTrack、VideoTrack或TextTrack)。
例項方法
TrackEvent 本身沒有方法;但是,它繼承自 Event,因此它提供了 Event 物件上可用的方法。
示例
此示例設定了一個名為 handleTrackEvent() 的函式,該函式會在文件中找到的第一個 <video> 元素上處理任何 addtrack 或 removetrack 事件。
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 |
瀏覽器相容性
載入中…