<track>:嵌入文字軌道元素
<track> HTML 元素用作媒體元素 <audio> 和 <video> 的子元素。每個軌道元素允許您指定一個定時文字軌道(或基於時間的的資料),該軌道可以與媒體元素並行顯示,例如,在影片上疊加字幕或隱藏式字幕,或與音訊軌道一起顯示。
可以為媒體元素指定多個軌道,其中包含不同型別的定時文字資料,或已針對不同語言環境翻譯的定時文字資料。使用的資料將是已設定為預設值的軌道,或基於使用者首選項的型別和翻譯。
軌道採用 WebVTT 格式(.vtt 檔案)— Web 影片文字軌道。
試一試
屬性
此元素包含全域性屬性。
預設-
此屬性指示應啟用該軌道,除非使用者的首選項表明另一個軌道更合適。這隻能用於每個媒體元素上的一個
track元素。 kind-
文字軌道的預期用途。如果省略,則預設的kind為
subtitles。如果屬性包含無效值,則將使用metadata。允許以下關鍵字subtitles- 字幕提供對觀看者無法理解的內容的翻譯。例如,英語電影中非英語的語音或文字。
- 字幕可能包含其他內容,通常是額外的背景資訊。例如,《星球大戰》電影開頭的文字,或場景的日期、時間和地點。
captions- 隱藏式字幕提供音訊的轉錄和可能的翻譯。
- 它可能包含重要的非語言資訊,例如音樂提示或音效。它可能指示提示的來源(例如,音樂、文字、角色)。
- 適用於聾啞使用者或聲音靜音時。
chapters- 當用戶瀏覽媒體資源時,章節標題用於導航。
metadata- 指令碼使用的軌道。使用者不可見。
label-
文字軌道的使用者可讀標題,瀏覽器在列出可用文字軌道時使用。
src-
軌道的地址(
.vtt檔案)。必須是有效的URL。此屬性必須指定,並且其URL值必須與文件具有相同的來源——除非track元素的<audio>或<video>父元素具有crossorigin屬性。 srclang-
軌道文字資料的語言。它必須是有效的BCP 47語言標籤。如果
kind屬性設定為subtitles,則必須定義srclang。
用法說明
軌道資料型別
track新增到媒體的資料型別在kind屬性中設定,該屬性可以取subtitles、captions、chapters或metadata的值。該元素指向一個包含定時文字的原始檔,當用戶請求其他資料時,瀏覽器會公開該檔案。
媒體元素不能具有多個具有相同kind、srclang和label的track。
檢測提示更改
由TextTrack(由track屬性指示)表示的基礎物件在每次當前顯示的提示更改時都會收到cuechange事件。即使軌道未與媒體元素關聯,也會發生這種情況。
如果軌道確實與媒體元素關聯,則使用<track>元素作為<audio>或<video>元素的子元素,cuechange事件也會發送到HTMLTrackElement。
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
以程式設計方式新增文字軌道
表示<track>元素的JavaScript介面是HTMLTrackElement。與元素關聯的文字軌道可以從HTMLTrackElement.track屬性中獲取,並且型別為TextTrack。
TextTrack物件也可以使用HTMLMediaElement.addTextTrack()方法新增到HTMLVideoElement或HTMLAudioElement元素。與媒體元素關聯的TextTrack物件儲存在TextTrackList中,可以使用HTMLMediaElement.textTracks屬性檢索。
示例
<video controls poster="/images/sample.gif">
<source src="sample.mp4" type="video/mp4" />
<source src="sample.ogv" type="video/ogv" />
<track kind="captions" src="sampleCaptions.vtt" srclang="en" />
<track kind="chapters" src="sampleChapters.vtt" srclang="en" />
<track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
<track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
<track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
<track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
<track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
<track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
<track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
<!-- Fallback -->
…
</video>
技術摘要
規範
| 規範 |
|---|
| HTML標準 # the-track-element |
瀏覽器相容性
BCD表格僅在瀏覽器中載入