字幕与轨道支持（'<track>'标签）

<track>标签是HTML5中用于为媒体元素（如<video>和<audio>）提供字幕、标题或其他文本轨道支持的重要元素。它允许开发者嵌入外部文本资源，增强媒体的可访问性和用户体验。

<track>标签的基本语法

<track>标签必须作为<video>或<audio>的子元素使用，且通常位于<source>标签之后。其基本语法如下：

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

关键属性说明

• src: 指定轨道文件的路径（如WebVTT格式文件）
• kind: 定义轨道类型，可选值包括：
  • subtitles (默认值)：翻译对白或文本
  • captions：包含声音描述
  • descriptions：视频内容的文本描述
  • chapters：章节导航
  • metadata：脚本使用的元数据
• srclang: 轨道文本的语言代码（如"en"、"zh"）
• label: 用户可见的轨道名称
• default: 标记为默认轨道（布尔属性）

WebVTT文件格式

<track>通常使用WebVTT（.vtt）格式的文件。一个典型的字幕文件示例如下：

WEBVTT

00:00:01.000 --> 00:00:04.000
这是第一句字幕

00:00:05.500 --> 00:00:08.000
这是第二句字幕

WebVTT文件结构详解

1. 文件头：必须以WEBVTT开头
2. 时间轴：格式为HH:MM:SS.mmm --> HH:MM:SS.mmm
3. 文本内容：支持简单HTML标签如<b>, <i>, <ruby>
4. 样式支持：可通过CSS伪元素::cue自定义样式

高级用法示例

多语言字幕支持

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="captions_zh.vtt" kind="captions" srclang="zh" label="中文说明">
</video>

JavaScript动态控制

const video = document.querySelector('video');
const tracks = video.textTracks; // 获取所有文本轨道

// 监听轨道变化
tracks.onchange = function(e) {
  const track = [...this].find(t => t.mode === 'showing');
  console.log('当前显示轨道:', track.label);
};

// 动态添加轨道
function addTrack(src, lang, label) {
  const track = document.createElement('track');
  track.src = src;
  track.kind = 'subtitles';
  track.srclang = lang;
  track.label = label;
  video.appendChild(track);
}

样式自定义

可以通过CSS为字幕添加样式：

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

video::cue(b) {
  color: yellow;
}

video::cue(.warning) {
  color: red;
}

对应的WebVTT文件中可以包含类名：

00:00:10.000 --> 00:00:13.000
这是一句 <b>加粗</b> 字幕

00:00:15.000 --> 00:00:18.000
<span class="warning">警告内容</span>

实际应用场景

教育视频

为教学视频添加多语言字幕和章节标记：

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en">
  <track src="transcript.vtt" kind="subtitles" srclang="en" default>
</video>

无障碍访问

为听力障碍用户提供详细说明：

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

兼容性与注意事项

1. 浏览器支持：所有现代浏览器都支持<track>标签，但IE11需要polyfill
2. CORS限制：轨道文件需遵循同源策略或配置正确的CORS头
3. MIME类型：WebVTT文件应使用text/vtt MIME类型
4. 性能考虑：大量轨道或大型VTT文件可能影响加载性能

错误处理与调试

当轨道加载失败时，可以监听错误事件：

const track = document.querySelector('track');
track.addEventListener('error', (e) => {
  console.error('轨道加载失败:', track.src);
});

调试轨道状态：

const video = document.querySelector('video');
const tracks = video.textTracks;

for (let i = 0; i < tracks.length; i++) {
  const track = tracks[i];
  console.log(`轨道 ${i}:`, {
    label: track.label,
    language: track.language,
    mode: track.mode, // "disabled", "hidden", "showing"
    cues: track.cues
  });
}

扩展功能实现

实时字幕切换

<video controls id="main-video">
  <source src="presentation.mp4" type="video/mp4">
</video>

<div class="subtitle-controls">
  <button onclick="setSubtitle('en')">English</button>
  <button onclick="setSubtitle('zh')">中文</button>
  <button onclick="disableSubtitle()">关闭字幕</button>
</div>

<script>
function setSubtitle(lang) {
  const video = document.getElementById('main-video');
  const tracks = video.textTracks;
  
  for (let i = 0; i < tracks.length; i++) {
    tracks[i].mode = tracks[i].language === lang ? 'showing' : 'hidden';
  }
}

function disableSubtitle() {
  const video = document.getElementById('main-video');
  const tracks = video.textTracks;
  
  for (let i = 0; i < tracks.length; i++) {
    tracks[i].mode = 'hidden';
  }
}
</script>

动态生成WebVTT内容

function generateVTT(texts) {
  let vttContent = 'WEBVTT\n\n';
  
  texts.forEach((text, index) => {
    const start = formatTime(text.startTime);
    const end = formatTime(text.endTime);
    vttContent += `${start} --> ${end}\n${text.content}\n\n`;
  });
  
  return URL.createObjectURL(new Blob([vttContent], { type: 'text/vtt' }));
}

function formatTime(seconds) {
  const date = new Date(0);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 12);
}

// 使用示例
const subtitles = [
  { startTime: 1, endTime: 4, content: "第一句字幕" },
  { startTime: 5, endTime: 8, content: "第二句字幕" }
];

const vttUrl = generateVTT(subtitles);
document.querySelector('track').src = vttUrl;