TextTrackList
TextTrackList 介面用於表示與關聯的影片或音訊元素定義的文字軌道列表，列表中的每個軌道都由一個單獨的 TextTrack 物件表示。
可以透過宣告性地使用 <track> 元素，或以程式設計方式使用 HTMLMediaElement.addTextTrack() 方法將文字軌道新增到媒體元素。
可以透過 HTMLMediaElement 物件的 textTracks 屬性檢索此物件的例項。
對於給定的 HTMLMediaElement 物件 media，可以透過以下方式訪問各個軌道：
media.TextTracks[n]，用於從物件的文字軌道列表中獲取第 n 個文字軌道media.textTracks.getTrackById()方法
例項屬性
此介面還繼承了其父介面 EventTarget 的屬性。
length只讀-
列表中軌道的數量。
例項方法
此介面還繼承了其父介面 EventTarget 的方法。
事件
addtrack-
當新文字軌道已新增到媒體元素時觸發。也可透過
onaddtrack屬性訪問。 change-
當文字軌道變為活動或非活動狀態時觸發。也可透過
onchange屬性訪問。 removetrack-
當文字軌道已從媒體元素中移除時觸發。也可透過
onremovetrack屬性訪問。
用法說明
除了能夠直接訪問媒體元素上的文字軌道外，TextTrackList 還允許您在 addtrack 和 removetrack 事件上設定事件處理程式，以便您可以檢測到軌道何時被新增到媒體元素的流中或從其流中移除。
示例
獲取影片元素的文字軌道列表
要獲取媒體元素的 TextTrackList，請使用其 textTracks 屬性。
js
const textTracks = document.querySelector("video").textTracks;
監控軌道數量的變化
在此示例中，我們有一個應用程式顯示可用頻道的數量。為了保持其最新狀態，會設定 addtrack 和 removetrack 事件的事件處理程式。
js
textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
trackCount = textTracks.length;
drawTrackCountIndicator(trackCount);
}
規範
| 規範 |
|---|
| HTML # text-track-api |
瀏覽器相容性
載入中…