html中track的用途 html中track字幕用法介绍

<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 则更侧重于对视频内容的整体描述。

PHP的使用技巧集

PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI或者Perl更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多。下面介绍了十个PHP高级应用技巧。 1, 使用 ip2long() 和 long2ip() 函数来把 IP 地址转化成整型存储到数据库里

440

查看详情

如何用 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。这些库提供了更多的自定义选项和更强的兼容性。虽然使用这些库会增加一些开发工作量，但它们可以让你更好地控制字幕的显示效果和行为。

以上就是html中track的用途 html中track字幕用法介绍的详细内容，更多请关注php中文网其它相关文章！