异常教程

HTML DOM Track kind 属性（超详细）

更新时间:

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

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

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

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

Track 元素与文本轨道的基础知识

在网页开发中，多媒体内容（如视频、音频）的增强功能通常需要依赖文本轨道（Text Track）。文本轨道可以提供字幕、描述、章节标记等辅助信息，提升用户体验。而 <track> 元素正是 HTML 中用于定义这些文本轨道的核心标签。

Track 元素的核心作用：

  1. 关联外部文本文件：通过 src 属性指向字幕、描述等文本文件。
  2. 指定轨道类型：通过 kind 属性定义轨道的功能，例如字幕、描述或章节标记。
  3. 提供语言信息：通过 srclang 属性标明轨道的语言，便于浏览器正确解析。

举个生活化的比喻：

如果把视频比作一场话剧，那么 <track> 元素就像舞台旁的“解说员”——它通过 kind 属性告诉观众，自己需要扮演的角色是“旁白”（字幕）、“引导员”（章节标记），还是“细节补充者”（描述文本）。

HTML DOM Track kind 属性的语法解析

基础语法

<track 
  kind="subtitles|captions|descriptions|chapters|metadata" 
  src="text-track.vtt" 
  srclang="en" 
  label="English Subtitles" 
>
  • kind 属性是本文的核心，它决定了轨道的功能类型。
  • 其他属性如 src、srclang、label 则分别指定文件路径、语言和用户可见的标签名称。

属性值的取值范围

kind 属性共有 5 种官方支持的值：
| 值 | 用途说明 |
|--------------|--------------------------------------------------------------------------|
| subtitles | 为非母语观众提供的翻译字幕（如英文视频配中文翻译）。 |
| captions | 为听力障碍用户提供文字化的音频内容（如对话、音效说明）。 |
| descriptions | 为视觉障碍用户提供对场景、动作等视觉信息的描述。 |
| chapters | 标记视频的章节或时间点（如电影片头、片尾）。 |
| metadata | 不向用户直接显示的元数据，供程序逻辑使用（如触发特定交互事件）。 |

kind 属性的可用值及其含义：场景化解读

1. subtitles：翻译字幕的“桥梁”

适用场景：
当视频的原始语言与观众母语不同时，subtitles 提供语言翻译。例如，英文视频配中文字幕。

案例代码：

<video controls>  
  <source src="movie.mp4" type="video/mp4">  
  <track 
    kind="subtitles" 
    src="chinese-subtitles.vtt" 
    srclang="zh" 
    label="中文翻译" 
  >  
</video>

2. captions：听障用户的“耳朵”

核心区别：
与 subtitles 不同，captions 不仅翻译对话，还会描述音效、背景音乐等非语言音频信息。

案例场景：

<video controls>  
  <source src="lecture.mp4" type="video/mp4">  
  <track 
    kind="captions" 
    src="captions-track.vtt" 
    srclang="en" 
    label="无障碍字幕" 
  >  
</video>

在此场景中，当视频中出现“[掌声响起]”时，captions 会将其转化为文字，而非仅翻译演讲内容。

3. descriptions：视障用户的“眼睛”

功能延伸：
为视觉障碍用户提供场景描述，例如：“画面显示一只棕色小狗在草地上奔跑。”

4. chapters：视频的“目录导航”

典型用途：
在长视频中设置章节标记，帮助用户快速跳转。例如：

WEBVTT CHAPTERS  

00:00:00.000 --> 00:00:01.000  
Chapter 1  

00:02:30.000 --> 00:02:31.000  
Chapter 2

浏览器会根据 chapters 类型的轨道，自动在视频控件中显示章节列表。

5. metadata：程序逻辑的“隐藏助手”

开发者视角：
通过 metadata 轨道存储与视频时间轴关联的数据，例如：

WEBVTT METADATA  

00:00:15.000 --> 00:00:16.000  
{ "event": "highlight", "color": "red" }

结合 JavaScript，可在特定时间点触发高亮显示或弹窗提示。

通过代码示例理解 kind 属性的使用场景

案例 1：多语言字幕切换

<video id="myVideo" controls>  
  <source src="video.mp4" type="video/mp4">  
  <!-- 中文字幕 -->  
  <track 
    kind="subtitles" 
    src="zh-subtitles.vtt" 
    srclang="zh" 
    label="中文" 
    default 
  >  
  <!-- 英文字幕 -->  
  <track 
    kind="subtitles" 
    src="en-subtitles.vtt" 
    srclang="en" 
    label="English" 
  >  
</video>  

<!-- JavaScript 控制字幕切换 -->  
<button onclick="switchSubtitle('zh')">切换中文</button>  
<button onclick="switchSubtitle('en')">Switch to English</button>  

<script>  
function switchSubtitle(lang) {  
  const video = document.getElementById('myVideo');  
  const tracks = video.textTracks;  
  for (let i = 0; i < tracks.length; i++) {  
    if (tracks[i].language === lang && tracks[i].kind === 'subtitles') {  
      tracks[i].mode = 'showing';  
    } else {  
      tracks[i].mode = 'hidden';  
    }  
  }  
}  
</script>

此示例通过 kind="subtitles" 过滤出字幕轨道，实现多语言切换功能。

结合 DOM 操作的进阶应用

1. 动态修改 kind 属性

虽然直接修改 kind 属性在浏览器中可能无效（因轨道类型在加载后固定），但可通过 JavaScript 动态加载不同轨道文件：

function loadNewTrack(kindValue, srcUrl) {  
  const video = document.querySelector('video');  
  const newTrack = document.createElement('track');  
  newTrack.kind = kindValue;  
  newTrack.src = srcUrl;  
  video.appendChild(newTrack);  
}  

// 调用示例：加载描述轨道  
loadNewTrack('descriptions', 'descriptions.vtt');

2. 监听轨道事件

通过监听 cuechange 事件，可在特定时间点触发交互：

const track = document.querySelector('track[kind="metadata"]');  
track.oncuechange = function() {  
  const activeCue = track.track.cues[track.track.activeCues[0]];  
  if (activeCue.text.includes('highlight')) {  
    document.body.style.backgroundColor = 'yellow';  
  }  
};

常见问题与最佳实践

Q: 不同浏览器对 kind 属性的支持是否一致？

A: 大部分现代浏览器（Chrome、Firefox、Safari）均支持 kind 属性的 5 种标准值，但对 metadata 类型的事件监听可能有差异，建议通过浏览器兼容性测试工具（如 Can I Use）验证。

Q: 如何调试 Track 元素的问题？

A:

  1. 检查控制台是否有文件加载错误（如 404）。
  2. 确认轨道类型与内容匹配（如 captions 是否包含音频描述）。
  3. 使用 textTracks 属性在 JavaScript 中查看轨道列表： 
    console.log(video.textTracks);

最佳实践建议

  • 语义化优先：根据内容选择最贴切的 kind 值，避免滥用 subtitles。
  • 渐进增强：为无障碍功能（如 captions、descriptions）提供备用方案。
  • 文件格式规范：使用 WebVTT 格式（.vtt）编写轨道文件，兼容性更佳。

结论

HTML DOM Track kind 属性是多媒体开发中不可或缺的工具，它通过定义文本轨道的类型，为不同用户群体（如听障、视障人士）提供信息支持，同时也为开发者拓展了交互逻辑的边界。掌握其语法、场景及 DOM 操作方法，能够显著提升网页的包容性和功能性。

在实际项目中，建议结合用户需求选择合适的 kind 值，并通过代码示例中的动态加载、事件监听等技巧，将理论转化为实用功能。随着 Web 标准的持续演进，文本轨道的潜力将进一步释放，成为丰富用户体验的“无声伙伴”。

最新发布

查看更多文章