HTML <track> label 属性

在网页开发中，有时候我们需要为视频或音频添加字幕，以便更好地展示内容。HTML 中的 <track> 元素就是用来定义这些字幕轨道的。除了一些基本的属性外，<track> 元素还有一个很重要的属性，那就是 label 属性。

什么是 <track> 元素

<track> 元素用来为 <audio> 或 <video> 元素定义外部文本轨道，比如字幕或章节标题。它通常作为 <video> 或 <audio> 元素的子元素出现。

<track> 元素有以下几个常用属性：

• src: 定义外部文本轨道的 URL。
• srclang: 定义外部文本轨道的语言。
• kind: 定义外部文本轨道的类型，比如 subtitles、captions、descriptions、chapters、metadata。
• label: 定义外部文本轨道的标签，用于显示给用户。

<track> 元素的 label 属性

label 属性用于定义外部文本轨道的标签，它是可选的属性。当浏览器支持多个外部文本轨道时，label 属性可以让用户选择不同的文本轨道。

示例代码：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French">
</video>

在上面的示例中，我们为视频添加了两个外部文本轨道，一个是英文字幕，一个是法语字幕。用户可以通过浏览器的控件选择不同的字幕轨道来显示不同的语言字幕。

总结

通过 label 属性，我们可以为外部文本轨道定义一个易于识别的标签，让用户更加方便地选择不同的文本轨道。在实际开发中，我们可以根据需要为视频或音频添加多个外部文本轨道，并为每个轨道添加不同的 label 属性，以提供更好的用户体验。