HTML 的＜track＞元素

1. 引言

在 HTML5 中，<video> 和 <audio> 元素让网页可以轻松嵌入多媒体内容。但你是否注意过，在视频播放器底部切换字幕、章节或描述信息时，背后其实有一个低调却强大的元素在默默支撑？它就是 <track> 元素。

<track> 是 <video> 和 <audio> 的子元素，用于为媒体资源指定一种基于时间的文本轨道（text track），例如字幕、章节标题、元数据等。它本身不渲染任何可见内容，却能让媒体内容对更多用户更友好、更易检索。

本文将带你全面认识 <track> 元素：它的作用、属性、SRT 与 WebVTT 格式的写法，以及实际可运行的项目示例。

2. 为什么需要 <track> 元素

在没有 <track> 之前，网页视频的字幕通常依赖 Flash 播放器或 JavaScript 自行解析外部字幕文件，实现复杂且难以标准化。HTML5 引入 <track> 后，浏览器原生支持字幕加载与切换，带来了几个显著好处：

可访问性：为听障用户提供字幕，为视障用户提供音频描述。
多语言支持：同一视频可挂载多种语言的字幕，用户按需切换。
内容导航：通过章节轨道（chapters），用户可快速跳转到视频的指定段落。
性能优化：字幕文件独立于视频文件，按需加载，不阻塞媒体播放。
标准化：基于 WebVTT 标准格式，无需依赖第三方库。

3. <track> 元素的基本用法

<track> 是一个空元素（void element），必须作为 <video> 或 <audio> 的子元素出现。一个媒体元素可以包含多个 <track>，分别对应不同的轨道类型或语言。

html 复制代码

<video controls src="movie.mp4">
  <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default>
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
</video>

在上面的例子中，我们为视频挂载了中英两条字幕轨道，并将中文设为默认显示。

4. <track> 的核心属性

<track> 元素支持以下关键属性：

属性	说明
`kind`	轨道的类型，可选值见下文
`src`	轨道数据的 URL，通常指向一个 `.vtt` 文件
`srclang`	轨道文本的语言代码（如 `zh`、`en`），`subtitles` 类型必填
`label`	轨道的可读名称，显示在字幕选择菜单中
`default`	布尔属性，表示该轨道默认启用

4.1 kind 属性的取值

kind 决定了轨道的用途，共有五种取值：

subtitles：字幕，翻译或转写对话内容，适合听障用户或非母语观众。
captions：隐藏式字幕，不仅包含对话，还包含音效、背景音乐等声音描述。
descriptions：音频描述，以文字描述画面内容，供视障用户使用。
chapters：章节标题，用于在媒体播放器中构建导航菜单。
metadata：元数据，供脚本读取，不向用户展示。

html 复制代码

<video controls src="documentary.mp4">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文隐藏字幕" default>
  <track kind="chapters" src="chapters.vtt" srclang="zh" label="章节">
  <track kind="descriptions" src="descriptions.vtt" srclang="zh" label="音频描述">
</video>

5. 轨道文件格式：WebVTT

<track> 的 src 指向的轨道文件通常采用 WebVTT （Web Video Text Tracks）格式，文件扩展名为 .vtt。它是一种基于文本的简单格式，以 WEBVTT 开头，随后是时间轴和文本内容。

vtt 复制代码

WEBVTT

00:00.000 --> 00:03.000
大家好，欢迎观看本教程。

00:03.500 --> 00:06.000
今天我们来学习 HTML 的 track 元素。

每一段字幕由三部分组成：

可选的字幕编号（如 1、2）。
时间轴，格式为 开始时间 --> 结束时间。
字幕文本，可包含多行。

5.1 时间轴格式

WebVTT 的时间格式为 小时:分钟:秒.毫秒，其中小时和毫秒可以省略：

00:03.500 表示 3 秒 500 毫秒。
00:01:00.000 表示 1 分钟整。

5.2 字幕中的样式与标签

WebVTT 支持在文本中嵌入少量 HTML 标签，用于简单的样式控制：

vtt 复制代码

WEBVTT

00:00.000 --> 00:03.000
<v 李雷>大家好，欢迎观看。</v>

00:03.500 --> 00:06.000
<i>今天我们来学习</i> <b>track 元素</b>。

<v 说话人>：标注说话人姓名。
<i>：斜体。
<b>：加粗。
<u>：下划线。
<c.类名>：应用 CSS 类。

5.3 章节轨道的写法

chapters 类型的轨道同样使用 WebVTT，但文本通常只包含章节标题：

vtt 复制代码

WEBVTT

00:00.000 --> 00:30.000
第一章 引言

00:30.000 --> 01:00.000
第二章 基本用法

6. 动手实践：一个带字幕的视频播放器

下面是一个完整的可运行示例，包含 HTML 页面和一个简单的 WebVTT 字幕文件。

6.1 项目结构

复制代码

track-demo/
├── index.html
└── subtitles-zh.vtt

6.2 index.html

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>track 元素示例</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 720px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    video {
      width: 100%;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>HTML &lt;track&gt; 元素演示</h1>

  <video controls src="https://example.com/sample.mp4">
    <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default>
  </video>

  <p>如果视频无法加载，请替换 <code>src</code> 为本地或可访问的视频地址。</p>
</body>
</html>

6.3 subtitles-zh.vtt

vtt 复制代码

WEBVTT

00:00.000 --> 00:03.000
大家好，欢迎观看本教程。

00:03.500 --> 00:06.000
今天我们来学习 HTML 的 track 元素。

00:06.500 --> 00:10.000
它能为视频添加字幕、章节和描述信息。

将两个文件放在同一目录下，用浏览器打开 index.html，播放视频时即可看到字幕显示，并可在播放器菜单中切换轨道。

7. 通过 JavaScript 动态操作轨道

除了静态声明，我们还可以用 JavaScript 动态添加或移除轨道，实现更灵活的控制。

html 复制代码

<video id="video" controls src="movie.mp4"></video>
<button id="addTrack">添加英文字幕</button>

javascript 复制代码

const video = document.getElementById('video');
const btn = document.getElementById('addTrack');

btn.addEventListener('click', () => {
  const track = document.createElement('track');
  track.kind = 'subtitles';
  track.src = 'subtitles-en.vtt';
  track.srclang = 'en';
  track.label = 'English';
  video.appendChild(track);
});

注意：动态添加轨道后，需要通过 track.track.mode 属性控制其显示状态：

javascript 复制代码

// 获取轨道对应的 TextTrack 对象
const textTrack = video.textTracks[0];
textTrack.mode = 'showing'; // 显示
textTrack.mode = 'hidden';  // 隐藏
textTrack.mode = 'disabled'; // 禁用

8. 浏览器兼容性与注意事项

<track> 元素在现代浏览器中已得到广泛支持，包括 Chrome、Firefox、Safari、Edge 等。但在使用时仍需注意以下几点：

字幕文件必须与页面同源或支持 CORS，否则可能无法加载。
subtitles 类型必须指定 srclang 属性。
多个轨道中，default 属性只能出现在一个轨道上。
若浏览器不支持 WebVTT 的某些高级特性（如样式标签），会退化为纯文本显示。
音频描述（descriptions）目前部分浏览器支持有限，可能需要借助辅助技术读取。

9. 总结

<track> 元素虽小，却是 HTML5 媒体能力中不可或缺的一环。它让网页视频和音频真正做到了「一次制作，多语言、多场景适配」，既提升了可访问性，也改善了用户体验。

通过本文的学习，你应该已经掌握了：

<track> 元素的作用与五种 kind 类型。
WebVTT 字幕文件的基本语法。
如何在 HTML 中声明轨道，以及用 JavaScript 动态操作轨道。

下次在项目中嵌入视频时，别忘了为它加上一条字幕轨道------这不仅是锦上添花，更是对每一位观众的尊重。

HTML 的 ＜track＞ 元素

1. 引言

2. 为什么需要 <track> 元素

3. <track> 元素的基本用法

4. <track> 的核心属性

4.1 kind 属性的取值

5. 轨道文件格式：WebVTT

5.1 时间轴格式

5.2 字幕中的样式与标签

5.3 章节轨道的写法

6. 动手实践：一个带字幕的视频播放器

6.1 项目结构

6.2 index.html

6.3 subtitles-zh.vtt

7. 通过 JavaScript 动态操作轨道

8. 浏览器兼容性与注意事项

9. 总结

HTML 的＜track＞元素