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>。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.vtt6.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 <track> 元素演示</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 动态操作轨道。
下次在项目中嵌入视频时，别忘了为它加上一条字幕轨道------这不仅是锦上添花，更是对每一位观众的尊重。