元素，简单来说，就是给你的 HTML5 视频或者音频添加字幕、描述、章节信息等等。它就像一个看不见的助手，默默地丰富着你的媒体体验。
解决方案
元素通过 src 属性指向一个外部文本文件（通常是 .vtt 格式），这个文件包含了字幕、描述或其他元数据。浏览器会解析这个文件，并根据 kind 属性来决定如何处理这些数据。
立即学习“前端免费学习笔记（深入）”；
以下是一个基本的使用示例：
在这个例子中，我们添加了两个字幕轨道（中文和英文）、一个描述轨道和一个章节轨道。 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 中的 `
每个时间戳定义了文本应该何时显示。
支持哪些 kind 类型，它们之间有什么区别？
kind 属性定义了 元素的用途，它有以下几个常用的值：
-
subtitles: 用于显示字幕，通常是对话的翻译。 -
captions: 用于显示隐藏字幕，通常是为听力障碍人士提供的。它不仅包含对话，还可能包含声音效果和其他重要的音频信息。 -
descriptions: 用于提供视频内容的文字描述，通常是为视力障碍人士提供的。 -
chapters: 用于定义视频的章节，允许用户快速跳转到不同的部分。 -
metadata: 用于提供额外的元数据，这些数据不会直接显示给用户，但可以被 JavaScript 访问。
subtitles 和 captions 的区别有时候比较模糊，但一般来说，captions 包含的信息更多，更全面。descriptions 则更侧重于对视频内容的整体描述。
如何用 JavaScript 控制 元素？
你可以使用 JavaScript 来动态地控制 元素，例如，切换字幕、隐藏字幕或者读取元数据。
首先，你需要获取 元素和 元素：
const video = document.querySelector('video');
const tracks = video.textTracks;video.textTracks 返回一个 TextTrackList 对象，包含了所有的 元素。
然后，你可以使用 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); // 输出当前字幕
}
}); 元素的兼容性如何？有哪些替代方案？
元素的兼容性总体来说不错，现代浏览器都支持它。但是，对于一些老旧的浏览器，可能需要使用 polyfill 来提供支持。
一个常用的 polyfill 是 track-polyfill.js。你可以通过 CDN 引入它：
如果你的项目需要兼容非常老的浏览器，或者需要更高级的字幕控制功能，你也可以考虑使用 JavaScript 字幕库，例如 Subtitle.js 或者 DPlayer。这些库提供了更多的自定义选项和更强的兼容性。虽然使用这些库会增加一些开发工作量，但它们可以让你更好地控制字幕的显示效果和行为。
