<track>：嵌入式文字軌道元素

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<track> HTML 元素作為媒體元素（<audio> 和 <video>）的子元素使用。每個 track 元素允許你指定一個有時序的文字軌道（或基於時間的資料），它可以與媒體元素並行顯示，例如在影片上疊加字幕或隱藏式字幕，或與音軌一同顯示。

媒體元素可以指定多個 track，包含不同型別的有時序的文字資料，或針對不同語言環境翻譯的有時序的文字資料。使用的資料將是設定為預設的軌道，或根據使用者偏好選擇的型別和翻譯。

軌道以 WebVTT 格式（.vtt 檔案）格式化——Web 影片文字軌道。

試一試

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    src="/shared-assets/misc/friday.vtt" />
  Download the
  <a href="/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

屬性

此元素包含全域性屬性。

default

此屬性表示除非使用者偏好指示有更合適的其他軌道，否則該軌道應啟用。每個媒體元素只能在一個 track 元素上使用此屬性。

kind

文字軌道的預期用途。如果省略，預設型別為 subtitles。如果屬性包含無效值，它將使用 metadata。允許使用以下關鍵字：

subtitles（字幕）: 字幕提供對話的轉錄或翻譯。它們適用於聲音可用但無法理解的情況，例如英語電影中非英語的語音或文字。字幕可能包含額外內容，通常是額外的背景資訊。例如，《星球大戰》電影開頭的文字，或場景的日期、時間和地點。字幕資訊補充了音訊和影片。它通常嵌入在影片本身中，但也可以單獨提供，特別是用於整部電影的翻譯。
captions（隱藏式字幕）: 隱藏式字幕提供對話、音效、相關音樂提示和其他相關音訊資訊的轉錄或翻譯，例如提示的來源（例如，角色、環境）。它們適用於聲音不可用或聽不清楚的情況（例如，因為聲音被靜音、被環境噪音淹沒，或因為使用者是聾啞人）。
descriptions（描述）: 描述總結了媒體資源的影片部分。當視覺部分被遮擋、不可用或無法使用時（例如，使用者在駕駛時與無螢幕應用程式互動，或因為使用者是盲人），它們旨在以音訊形式合成。
chapters（章節）: 當用戶導航媒體資源時，章節標題旨在用於此目的。
metadata（元資料）: 指令碼使用的軌道。使用者不可見。

label

文字軌道的使用者可讀標題，瀏覽器在列出可用文字軌道時使用。

src

軌道（.vtt 檔案）的地址。必須是有效的 URL。此屬性必須指定，並且其 URL 值必須與文件同源——除非 track 元素的 <audio> 或 <video> 父元素具有 crossorigin 屬性。

srclang

軌道文字資料的語言。它必須是有效的 BCP 47 語言標籤。如果 kind 屬性設定為 subtitles，則必須定義 srclang。

let textTrackElem = document.getElementById("text-track");

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 屬性檢索。

示例

html

<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>

技術摘要

內容類別	None
允許內容	無；它是一個空元素。
標籤省略	必須有起始標籤，且不能有結束標籤。
允許父級	媒體元素，`<audio>` 或 `<video>`。
隱式 ARIA 角色	沒有對應的角色
允許的 ARIA 角色	不允許 `role`
DOM 介面	`HTMLTrackElement`