html track标签怎么用

1. 简介

HTML的track标签是WebVTT文本跟踪文件在HTML视频和音频元素中的实现。WebVTT是一种用于创建视频文本跟踪的语言，它允许您在视频上方叠加文本。通常用于字幕和翻译。而track标签就是用于引用这些文本跟踪文件。

2. 基本使用

要在HTML中使用track标签，我们需要将它添加到video或audio元素中。在该元素中，您可以通过添加以下属性来定义路径和语言：

<video controls>

  <source src="movie.mp4" type="video/mp4">
  <track src="chinese_subtitles.vtt" kind="subtitles" srclang="zh" label="Chinese">
</video>

2.1. 属性

kind：用于定义文本轨道的类型。可选的值有：

subtitles：字幕

captions：标题

descriptions：描述

chapters：章节，这用于HTML文本跟踪在<track>元素托管的WebVTT文件中

metadata：元数据

src：指定vtt文件的路径。

srclang：该属性用于指定WebVTT文件的语言，它采用了ISO 639-1语言代码。例如，英语是“en”，中文是“zh”

label：使用label属性为每个文本轨道定义标签或标题（如果有多个文本轨道）。用户可以通过用户界面来切换这些标签。

3. 其他

3.1. Track标签的位置

WebVTT文本跟踪文件与音频或视频文件的关系类似于音频或视频文件与子标题文件之间的关系。WebVTT文本跟踪文件可以与视频或音频文件一起打包，或者也可以分开加载。如果文本跟踪文件作为单独的文件加载，它必须使用一个与视频或音频文件相同的域。例如，如果视频文件位于“http://example.com/video.mp4”上，则文本轨道文件必须位于“http://example.com/chinese_subtitles.vtt”上。

3.2. 多语言支持

您可以为多个不同的语言添加webvtt文本跟踪文件。只需将<track>元素复制，并分别更改它们的srclang和label属性即可

<video controls>

  <source src="movie.mp4" type="video/mp4">
  <track src="chinese_subtitles.vtt" kind="subtitles" srclang="zh" label="Chinese">
  <track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

3.3. 类似其他元素

如果你注意到了，你就会发现，video和audio的<source>元素有很多相似的字幕。这是因为这两个元素都可以使用文本跟踪，因此他们共享类似的WebVTT文本跟踪支持相关属性。

3.4. 例子

以下是一个简单的示例。注意选项的标签，语言和类型

<video id="video-player" controls>

  <source src="movie.mp4" type="video/mp4">
  <track src="chinese.vtt" kind="subtitles" srclang="zh" label="Chinese">
</video>