<track> 元素用于为 html5 视频或音频添加字幕、描述、章节等信息。1. 它通过 src 属性指向 .vtt 文件，结合 kind、srclang 和 label 属性定义轨道类型、语言及显示名称；2. 支持的 kind 类型包括 subtitles（翻译）、captions（含音效的完整字幕）、descriptions（视频描述）、chapters（章节跳转）和 metadata（元数据）；3. 可通过 javascript 动态控制轨道显示状态并监听字幕变化；4. 现代浏览器兼容性良好，老旧浏览器可使用 polyfill 或第三方库替代。
<track> 元素，简单来说，就是给你的 HTML5 视频或者音频添加字幕、描述、章节信息等等。它就像一个看不见的助手，默默地丰富着你的媒体体验。
解决方案
<track> 元素通过 src 属性指向一个外部文本文件（通常是 .vtt 格式），这个文件包含了字幕、描述或其他元数据。浏览器会解析这个文件，并根据 kind 属性来决定如何处理这些数据。
立即学习“前端免费学习笔记（深入）”；
以下是一个基本的使用示例：
<video controls width="640" style="max-width:90%"> <source src="myvideo.mp4" type="video/mp4"> <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="descriptions.vtt" kind="descriptions" srclang="en" label="English Descriptions"> <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters"> Your browser does not support the video tag. </video>
在这个例子中，我们添加了两个字幕轨道（中文和英文）、一个描述轨道和一个章节轨道。 kind 属性定义了轨道的类型，srclang 属性指定了语言，label 属性则是在播放器界面上显示的名称。
VTT 文件（Web Video Text Tracks）的格式很简单，它由时间戳和文本组成：
WEBVTT 00:00:00.000 --> 00:00:05.000 大家好，欢迎观看本视频。 00:00:05.000 --> 00:00:10.000 今天我们将讨论 HTML 中的 `<track>` 元素。
每个时间戳定义了文本应该何时显示。
<track> 支持哪些 kind 类型，它们之间有什么区别？
kind 属性定义了 <track> 元素的用途，它有以下几个常用的值：
-
subtitles: 用于显示字幕，通常是对话的翻译。 -
captions: 用于显示隐藏字幕，通常是为听力障碍人士提供的。它不仅包含对话，还可能包含声音效果和其他重要的音频信息。 -
descriptions: 用于提供视频内容的文字描述，通常是为视力障碍人士提供的。 -
chapters: 用于定义视频的章节，允许用户快速跳转到不同的部分。 -
metadata: 用于提供额外的元数据，这些数据不会直接显示给用户，但可以被 JavaScript 访问。
subtitles 和 captions 的区别有时候比较模糊，但一般来说，captions 包含的信息更多，更全面。descriptions 则更侧重于对视频内容的整体描述。
如何用 JavaScript 控制 <track> 元素？
你可以使用 JavaScript 来动态地控制 <track> 元素，例如，切换字幕、隐藏字幕或者读取元数据。
首先，你需要获取 <video> 元素和 <track> 元素：
const video = document.querySelector('video');
const tracks = video.textTracks;video.textTracks 返回一个 TextTrackList 对象，包含了所有的 <track> 元素。
然后，你可以使用 mode 属性来控制轨道的显示状态：
for (let i = 0; i < tracks.length; i++) {
if (tracks[i].label === '中文') {
tracks[i].mode = 'showing'; // 显示中文字幕
} else {
tracks[i].mode = 'hidden'; // 隐藏其他字幕
}
}mode 属性有三个值：
-
disabled: 禁用轨道。 -
hidden: 隐藏轨道。 -
showing: 显示轨道。
你还可以监听 cuechange 事件，来获取当前显示的字幕：
tracks[0].addEventListener('cuechange', () => {
const cue = tracks[0].activeCues[0];
if (cue) {
console.log(cue.text); // 输出当前字幕
}
});<track> 元素的兼容性如何？有哪些替代方案？
<track> 元素的兼容性总体来说不错，现代浏览器都支持它。但是，对于一些老旧的浏览器，可能需要使用 polyfill 来提供支持。
一个常用的 polyfill 是 track-polyfill.js。你可以通过 CDN 引入它：
<script src="https://cdn.jsdelivr.net/npm/track-polyfill@1.0.3/track-polyfill.min.js"></script>
如果你的项目需要兼容非常老的浏览器，或者需要更高级的字幕控制功能，你也可以考虑使用 JavaScript 字幕库，例如 Subtitle.js 或者 DPlayer。这些库提供了更多的自定义选项和更强的兼容性。虽然使用这些库会增加一些开发工作量，但它们可以让你更好地控制字幕的显示效果和行为。
