mdn · yin1999 · Nov 21, 2024 · Nov 13, 2024 · Nov 13, 2024 · Nov 15, 2024
@@ -1,121 +1,147 @@
 ---
-title: <track>
+title: <track>：嵌入文本轨元素
 slug: Web/HTML/Element/track
+l10n:
+  sourceCommit: 783ffd9c1cf35421242e028a1b8743cf2b1918dd
 ---
 
-**HTML `<track>` 元素** 被当作媒体元素—{{HTMLElement("audio")}} 和 {{HTMLElement("video")}}的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 [WebVTT 格式](/zh-CN/docs/Web/API/Web_Video_Text_Tracks_Format)（`.vtt`格式文件）— Web 视频文本字幕格式，以及指[时序文本标记语言（TTML）](https://w3c.github.io/ttml2/index.html)格式。
+{{HTMLSidebar}}
 
-`track` 给媒体元素添加的数据的类型在 `kind` 属性中设置，属性值可以是 `subtitles`, `captions`, `descriptions`, `chapters` 或 `metadata`。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
+**`<track>`** [HTML](/zh-CN/docs/Web/HTML) 元素作为媒体元素 {{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 的子元素使用。每个文本轨元素允许你指定一个定时文本轨道（或基于时间的数据），可以与媒体元素并行显示，例如在视频上叠加字幕或隐藏式字幕，或与音频轨道一起显示。
 
-一个`media` 元素的任意两个 `track` 子元素不能有相同的 `kind`, `srclang`, 和 `label`属性。
+可以为一个媒体元素指定多个轨道，包含不同种类的定时文本数据，或为不同区域翻译的定时文本数据。使用的数据将是已设置为默认的轨道，或者基于用户偏好的类型和语言翻译。
 
-{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}
+轨道格式为 [WebVTT 格式](/zh-CN/docs/Web/API/WebVTT_API)（`.vtt` 文件）——Web 视频文本轨。
 
-## 使用上下文
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong><a href="/zh-CN/docs/Web/HTML/Content_categories">内容分类</a></strong></td>
-   <td>无</td>
-  </tr>
-  <tr>
-   <td><strong>允许的内容</strong></td>
-   <td>无，它是一个 {{Glossary("空元素")}}。</td>
-  </tr>
-  <tr>
-   <td><strong>标签省略</strong></td>
-   <td>允许省略，因为他是一个空元素，所以开始标签必须存在，结束标记可以省略。</td>
-  </tr>
-  <tr>
-   <td><strong>允许的父元素</strong></td>
-   <td>媒体元素，<a href="/zh-CN/docs/HTML/Content_categories#Flow_content">流内容</a>之前。</td>
-  </tr>
-  <tr>
-   <td><strong>允许的 ARIA 角色</strong></td>
-   <td>无</td>
-  </tr>
-  <tr>
-   <td><strong>DOM 接口</strong></td>
-   <td>{{domxref("HTMLTrackElement")}}</td>
-  </tr>
- </tbody>
-</table>
+{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}
 
 ## 属性
 
-该元素包含 [全局属性](/zh-CN/docs/HTML/Global_attributes)。
+此元素包含[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。
 
 - `default`
-  - : 该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 `track` 元素可以有这个属性。
+  - : 此属性表示应启用该轨道，除非用户的偏好表明另一个轨道更合适。每个媒体元素只能在一个 `track` 元素上使用此属性。
 - `kind`
 
-  - : 定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 `subtitles`。下面是允许的关键字：
+  - : 文本轨道的使用方式。如果省略，默认的类型是 `subtitles`。如果属性包含无效值，则会使用 `metadata`。允许使用以下关键字：
 
     - `subtitles`
 
-      - 字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
-      - 字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。
-
-    - captions
+      - 字幕提供观众无法理解的内容的翻译。例如在英语电影中，非英语的语言或文本。
+      - 字幕可能包含额外的内容，通常是额外的背景信息。例如《星球大战》电影开头的文字，或场景的日期、时间和地点。
 
-      - 隐藏式字幕提供了音频的转录甚至是翻译。
-      - 可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
-      - 适用于耳聋的用户或者当调成静音的时候。
+    - `captions`
 
-    - `descriptions`
+      - 隐藏式字幕提供音频的文字记录，并可能包含翻译。
+      - 它可能包含重要的非语言信息，例如音乐提示或音效。它可能表示提示的来源（例如音乐、文本、角色）。
+      - 适合听力障碍用户或当声音被静音时使用。
 
-      - 视频内容的文本描述。
-      - 适用于失明用户或者当视频不可见的场景。
+  - `chapters`
 
-    - `chapters`
+    - 章节标题用于用户浏览媒体资源时使用。
 
-      - 章节标题用于用户浏览媒体资源的时候。
+  - `metadata`
 
-    - `metadata`
-
-      - 脚本使用的 track。对用户不可见。
+    - 由脚本元素使用的轨道。对用户不可见。
 
 - `label`
-  - : 当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。
+  - : 用户可读的文本轨道标题，浏览器在列出可用文本轨道时使用。
 - `src`
-  - : track 的地址。必须是合法的 URL。该属性必须定义。
+  - : 轨道的地址（`.vtt` 文件）。必须是一个有效的 URL。必须指定此属性，并且其 URL 值必须与文档具有相同的源 —— 除非 `track` 元素的父元素 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 有 [`crossorigin`](/zh-CN/docs/Web/HTML/Attributes/crossorigin) 属性。
 - `srclang`
-  - : track 文本数据的语言。它必须是合法的 [BCP 47](http://people.w3.org/rishida/utils/subtags/) 语言标签。如果 `kind` 属性被设为 `subtitles`, 那么 `srclang` 必须定义。
+  - : 轨道文本数据的语言。它必须是一个有效的 [BCP 47](https://r12a.github.io/app-subtags/) 语言标签。如果 `kind` 属性设置为 `subtitles`，则必须定义 `srclang`。
 
 ## 使用说明
 
 ### 轨道数据类型
 
-`track` 给媒体元素添加的数据的类型在 `kind` 属性中设置，属性值可以是 `subtitles`, `captions`, `descriptions`, `chapters` 或 `metadata`。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
+`track` 添加到媒体中的数据类型由 `kind` 属性设置，该属性可以取值 `subtitles`、`captions`、`chapters` 或 `metadata`。该元素指向一个包含定时文本的源文件，当用户请求附加数据时，浏览器会暴露该文件。
+
+一个媒体元素不能有多个具有相同 `kind`、`srclang` 和 `label` 的 `track`。
+
+### 检测字幕提示变化
+
+每当显示的字幕提示发生变化时，由 {{domxref("HTMLTrackElement.track", "track")}} 属性表示的底层 {{domxref("TextTrack")}} 都会接收到一个 `cuechange` 事件。即使轨道未关联媒体元素，也会发生这种情况。
+
+如果轨道*与*媒体元素关联，并且 `<track>` 元素作为 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 元素的子元素使用，则 `cuechange` 事件也会发送到 {{domxref("HTMLTrackElement")}}。
 
-一个`media` 元素的任意两个 `track` 子元素不能有相同的 `kind`, `srclang`, 和 `label`属性。
+```js
+let textTrackElem = document.getElementById("text-track");
+
+textTrackElem.addEventListener("cuechange", (event) => {
+  let cues = event.target.track.activeCues;
+});
+```
+
+### 以编程方式添加文本轨
+
+表示 `<track>` 元素的 JavaScript 接口是 {{domxref("HTMLTrackElement")}}。与元素关联的文本轨可以通过 {{domxref("HTMLTrackElement.track")}} 属性获取，其类型为 {{domxref("TextTrack")}}。
+
+`TextTrack` 对象也可以使用 {{domxref("HTMLMediaElement.addTextTrack()")}} 方法添加到 {{domxref("HTMLVideoElement")}} 或 {{domxref("HTMLAudioElement")}}。与媒体元素关联的 `TextTrack` 对象存储在 {{domxref("TextTrackList")}} 中，可以通过 {{domxref("HTMLMediaElement.textTracks")}} 属性获取。
 
 ## 示例
 
-```plain
+```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="descriptions"
-     src="sampleDescriptions.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 -->
-   ...
+  <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="第 1 阶段" />
+  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="第 2 阶段" />
+  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="第 3 阶段" />
+  <!-- 回退 -->
+  …
 </video>
 ```
 
+## 技术概要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-CN/docs/Web/HTML/Content_categories">内容分类</a>
+      </th>
+      <td>无</td>
+    </tr>
+    <tr>
+      <th scope="row">允许的内容</th>
+      <td>无；它是{{Glossary("void element", "空元素")}}。</td>
+    </tr>
+    <tr>
+      <th scope="row">标签省略</th>
+      <td>必须有开始标签，且不能有结束标签。</td>
+    </tr>
+    <tr>
+      <th scope="row">允许的父元素</th>
+      <td>
+        <p>
+          媒体元素，{{HTMLElement("audio")}} 或 {{HTMLElement("video")}}。
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">隐含的 ARIA 角色</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">没有对应的角色</a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允许的 ARIA 角色</th>
+      <td>没有允许的 <code>role</code></td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 接口</th>
+      <td>{{domxref("HTMLTrackElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
 ## 规范
 
 {{Specifications}}
@@ -124,8 +150,7 @@ slug: Web/HTML/Element/track
 
 {{Compat}}
 
-## 参阅
+## 参见
 
-- [WebVTT text track format](/zh-CN/docs/HTML/WebVTT)
-
-{{HTMLSidebar}}
+- [WebVTT 文本轨格式](/zh-CN/docs/Web/API/WebVTT_API)
+- {{domxref("HTMLMediaElement.textTracks")}}