HTML 音频/视频 DOM textTracks 属性（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，HTML5 的音频和视频元素为开发者提供了丰富的交互可能性。随着多媒体内容需求的增长，如何为用户提供多语言字幕、隐藏式字幕或描述性音频轨道（如为视障用户提供解说）成为关键问题。HTML 音频/视频 DOM textTracks 属性正是为此而生的核心工具，它允许开发者通过 JavaScript 动态控制媒体元素的文本轨道（Text Tracks），实现更灵活的内容管理和用户体验优化。本文将从基础概念到实战案例，逐步解析这一属性的使用方法与应用场景。

一、文本轨道（Text Tracks）的基础概念

1.1 什么是文本轨道？

文本轨道可以理解为媒体文件的“翻译官”或“解说员”。它以文本形式附加到音频或视频中，包含字幕、章节说明、描述性内容等信息。例如：

• 字幕（Subtitles）：将媒体中的对话转写为文本，帮助听障用户理解内容。
• 隐藏式字幕（Captions）：除了对话，还包括环境音描述（如“电话铃声响起”）。
• 描述性轨道（Descriptions）：为视障用户提供视觉内容的解释。
• 章节标记（Chapters）：将长视频划分为多个章节，方便用户快速跳转。

1.2 textTracks 属性的作用

通过 textTracks 属性，开发者可以：

• 动态添加或移除轨道：例如根据用户语言偏好加载不同字幕文件。
• 控制轨道的显示状态：如切换字幕的“显示/隐藏”模式。
• 监听轨道事件：例如在字幕加载完成后执行某些操作。

二、textTracks 属性的语法与属性解析

2.1 基础语法

每个 HTML 的 <audio> 或 <video> 元素都包含 textTracks 属性，其返回一个 TextTrackList 对象，该对象是一个类数组集合，包含所有与媒体关联的文本轨道。

<video id="myVideo" src="movie.mp4">  
  <track label="English Subtitles" kind="subtitles" srclang="en" src="en.vtt">  
</video>  

通过 JavaScript 访问：

const video = document.getElementById("myVideo");  
const tracks = video.textTracks; // 获取所有文本轨道  

2.2 TextTrack 对象的关键属性

每个文本轨道项（TextTrack）包含以下核心属性：

2.3 实例：遍历并显示所有轨道信息

// 遍历所有文本轨道  
for (let i = 0; i < tracks.length; i++) {  
  const track = tracks[i];  
  console.log(`类型: ${track.kind}, 名称: ${track.label}, 语言: ${track.language}`);  
}  

三、动态控制文本轨道的显示与隐藏

3.1 通过 mode 属性切换显示状态

开发者可通过修改 mode 属性来控制轨道的显示。例如，点击按钮切换字幕的显示：

<button onclick="toggleSubtitle()">切换字幕</button>  

function toggleSubtitle() {  
  const tracks = video.textTracks;  
  // 假设第一个轨道是字幕  
  const subtitleTrack = tracks[0];  
  if (subtitleTrack.mode === "showing") {  
    subtitleTrack.mode = "hidden";  
  } else {  
    subtitleTrack.mode = "showing";  
  }  
}  

3.2 动态添加新轨道

通过 addTextTrack() 方法可以运行时添加新轨道，例如根据用户选择加载外部字幕文件：

// 创建新轨道  
const newTrack = video.addTextTrack("subtitles", "Español", "es");  
// 加载外部 VTT 文件  
fetch("es.vtt")  
  .then(response => response.text())  
  .then(data => {  
    newTrack.mode = "showing"; // 自动显示新轨道  
    newTrack.cues.add(data); // 注意：实际需解析 VTT 内容后添加 Cue  
  });  

四、进阶用法：事件监听与交互优化

4.1 监听轨道加载完成事件

当轨道加载完成后，load 事件会触发，此时可以执行后续操作，例如更新 UI：

tracks.onload = function() {  
  console.log("所有轨道已加载");  
  // 更新字幕选择菜单  
  updateSubtitleMenu();  
};  

4.2 根据时间轴高亮当前字幕

通过监听 timeupdate 事件，结合 cues 属性，可以实现当前显示字幕的高亮效果：

video.addEventListener("timeupdate", function() {  
  const activeCues = tracks[0].cues; // 获取当前轨道的所有字幕片段  
  let currentCue = null;  
  for (let cue of activeCues) {  
    if (cue.startTime <= video.currentTime && cue.endTime >= video.currentTime) {  
      currentCue = cue;  
      break;  
    }  
  }  
  if (currentCue) {  
    console.log("当前显示字幕:", currentCue.text);  
    // 可以在此处更新 UI，例如高亮对应字幕文本  
  }  
});  

五、常见问题与解决方案

5.1 轨道未加载的可能原因

• 路径问题：检查 src 属性指向的 VTT 文件路径是否正确。
• 格式兼容性：确保使用 WebVTT（.vtt）格式，而非旧版 SRT。
• 浏览器支持：查阅 Can I Use 确认目标浏览器支持。

5.2 如何为旧版浏览器提供回退方案？

<!-- 使用 noscript 标签或 JavaScript 检测兼容性 -->  
<script>  
if (!("TextTrack" in window)) {  
  alert("您的浏览器不支持文本轨道功能");  
}  
</script>  

六、实战案例：多语言字幕切换器

6.1 案例需求

创建一个下拉菜单，允许用户切换视频的中英文字幕。

6.2 HTML 结构

<video id="myVideo" src="movie.mp4">  
  <track id="enTrack" kind="subtitles" src="en.vtt" srclang="en">  
  <track id="zhTrack" kind="subtitles" src="zh.vtt" srclang="zh">  
</video>  
<select id="subtitleSelector">  
  <option value="en">English</option>  
  <option value="zh">中文</option>  
</select>  

6.3 JavaScript 实现

const video = document.getElementById("myVideo");  
const selector = document.getElementById("subtitleSelector");  

selector.addEventListener("change", function() {  
  const selectedLang = this.value;  
  const tracks = video.textTracks;  
  tracks.forEach(track => {  
    if (track.language === selectedLang) {  
      track.mode = "showing";  
    } else {  
      track.mode = "hidden";  
    }  
  });  
});  

结论

HTML 音频/视频 DOM textTracks 属性为开发者提供了强大的文本轨道管理能力，无论是基础的字幕控制，还是进阶的动态交互，都能通过这一属性实现。通过本文的案例与代码示例，读者可以掌握如何通过 JavaScript 动态加载、切换和管理文本轨道，从而提升多媒体内容的可访问性和用户体验。随着 WebVTT 格式的不断完善，未来这一技术的应用场景将更加丰富，建议开发者持续关注相关标准更新，以应对更多复杂需求。