<track>-媒体文本轨道

<track> 元素在HTML中用于为媒体元素（如 <video> 或 <audio>）提供外部文本轨道。这些轨道可以是字幕、标题、章节描述或其他与媒体内容相关的文本数据。通过 <track>，开发者能够增强媒体的可访问性和用户体验。

<track> 的基本语法

<track> 是一个空元素，通常作为 <video> 或 <audio> 的子元素使用。它的基本语法如下：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>

<track> 的主要属性包括：

• src：指定轨道文件的URL。
• kind：定义轨道的类型（如 subtitles、captions、descriptions 等）。
• srclang：指定轨道文本的语言。
• label：为轨道提供一个用户可见的标签。

<track> 的 kind 属性详解

kind 属性决定了轨道的用途，以下是常见的值：

1. subtitles：字幕，默认值。用于翻译对话或显示非音频内容。

   <track src="subs.vtt" kind="subtitles" srclang="en" label="English Subs">
   

2. captions：标题。包含对白和音效描述，适合听力障碍用户。

   <track src="captions.vtt" kind="captions" srclang="en" label="English Captions">
   

3. descriptions：描述。提供视频内容的文本描述，适合视觉障碍用户。

   <track src="desc.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
   

4. chapters：章节。用于导航，标记视频的时间段。

   <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
   

5. metadata：元数据。供脚本使用，用户不可见。

   <track src="meta.vtt" kind="metadata" srclang="en">
   

轨道文件的格式：WebVTT

<track> 通常使用 WebVTT（.vtt）文件格式。一个简单的 WebVTT 文件如下：

WEBVTT

00:00:01.000 --> 00:00:04.000
This is the first subtitle.

00:00:05.000 --> 00:00:08.000
This is the second subtitle.

WebVTT 文件支持样式和注释：

WEBVTT

STYLE
::cue {
  color: yellow;
  background-color: rgba(0, 0, 0, 0.5);
}

00:00:01.000 --> 00:00:04.000
<i>Italic text</i> and <b>bold text</b>.

动态加载轨道

通过 JavaScript 可以动态添加或切换轨道：

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');
  const track = document.createElement('track');
  track.src = 'dynamic_subtitles.vtt';
  track.kind = 'subtitles';
  track.srclang = 'en';
  track.label = 'Dynamic Subtitles';
  video.appendChild(track);
  track.track.mode = 'showing'; // 激活轨道
</script>

轨道事件的监听

<track> 相关的事件可以通过 TextTrack 对象监听：

const video = document.querySelector('video');
const textTrack = video.addTextTrack('subtitles', 'English', 'en');
textTrack.mode = 'showing';

textTrack.oncuechange = function() {
  const cues = this.activeCues;
  for (let i = 0; i < cues.length; i++) {
    console.log('Current cue:', cues[i].text);
  }
};

跨浏览器兼容性

虽然现代浏览器普遍支持 <track>，但需要注意：

• IE11 部分支持，需测试具体功能。
• 旧版浏览器可能需要 polyfill，如 Captionator。

实际应用案例

1. 多语言字幕切换：

   <video controls>
     <source src="lecture.mp4" type="video/mp4">
     <track default src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
     <track src="subs_fr.vtt" kind="subtitles" srclang="fr" label="French">
   </video>
   

2. 无障碍视频：

   <video controls>
     <source src="tutorial.mp4" type="video/mp4">
     <track src="captions.vtt" kind="captions" srclang="en" label="English Captions">
     <track src="desc.vtt" kind="descriptions" srclang="en">
   </video>
   

3. 视频章节导航：

   <video id="chapterVideo" controls>
     <source src="documentary.mp4" type="video/mp4">
     <track src="chapters.vtt" kind="chapters" srclang="en">
   </video>
   
   <script>
     const video = document.getElementById('chapterVideo');
     video.textTracks[0].oncuechange = function() {
       const cue = this.activeCues[0];
       if (cue) console.log('Entered chapter:', cue.text);
     };
   </script>
   

高级功能：自定义轨道样式

通过 CSS 可以修改字幕的显示样式：

video::cue {
  font-size: 1.2em;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

video::cue(v[voice="narrator"]) {
  font-style: italic;
  color: cyan;
}

对应的 WebVTT 文件需包含语音标记：

WEBVTT

00:00:01.000 --> 00:00:04.000
<v narrator>This is the narrator's line.