元素用于为 html5 视频或音频添加字幕、描述、章节等信息。1. 它通过 src 属性指向 .vtt 文件，结合 kind、srclang 和 label 属性定义轨道类型、语言及显示名称；2. 支持的 kind 类型包括 subtitles（翻译）、captions（含音效的完整字幕）、descriptions（视频描述）、chapters（章节跳转）和 metadata（元数据）；3. 可通过 javascript 动态控制轨道显示状态并监听字幕变化；4. 现代浏览器兼容性良好，老旧浏览器可使用 polyfill 或第三方库替代。
元素，简单来说，就是给你的 HTML5 视频或者音频添加字幕、描述、章节信息等等。它就像一个看不见的助手，默默地丰富着你的媒体体验。
解决方案
元素通过 src 属性指向一个外部文本文件（通常是 .vtt 格式），这个文件包含了字幕、描述或其他元数据。浏览器会解析这个文件，并根据 kind 属性来决定如何处理这些数据。
立即学习“前端免费学习笔记（深入）”；
以下是一个基本的使用示例：
在这个例子中，我们添加了两个字幕轨道（中文和英文）、一个描述轨道和一个章节轨道。 kind 属性定义了轨道的类型，srclang 属性指定了语言，label 属性则是在播放器界面上显示的名称。
VTT 文件（Web Video Text Tracks）的格式很简单，它由时间戳和文本组成：
WEBVTT00: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。这些库提供了更多的自定义选项和更强的兼容性。虽然使用这些库会增加一些开发工作量，但它们可以让你更好地控制字幕的显示效果和行为。
以上就是html中track的用途 html中track字幕用法介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1565936.html
微信扫一扫 
支付宝扫一扫 
