HTML Academy · 课时

使用 track 和 WebVTT 添加字幕

Q: 「使用 track 和 WebVTT 添加字幕」这节课中我会学到什么？

使用 track 和 .vtt 文件为视频添加说明字幕和字幕 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 track 和 .vtt 文件为视频添加说明字幕和字幕

使用 track 和 WebVTT 添加字幕 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

字幕与副字幕

视频可访问性要求为音频内容提供文本替代形式：

副字幕 — 对话的文字记录，假设观看者能够听到声音
字幕 — 对话加声音描述（供聋人用户使用）
音频描述 — 为盲人用户描述视觉内容

track 元素

<track> 元素可以将副字幕或字幕文件链接到视频：

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

track 元素属性

track 元素的属性：

src — VTT 文件的路径
kind — 轨道类型（副字幕、字幕、描述、章节、元数据）
srclang — BCP 47 语言代码（en、es、fr……）
label — 在 CC 菜单中显示的易读名称
default — 布尔值；默认显示此轨道

WebVTT 格式

WebVTT（网页视频文本轨道）是一种字幕文件格式：

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

VTT 提示标识符

VTT 提示可以包含可选的标识符：

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

VTT 提示设置

VTT 提示支持定位设置：

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

使用 CSS 设置 WebVTT 提示样式

使用 ::cue 伪元素设置提示框样式：

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

track kind 值

kind 属性用于指定文本轨道的用途：

subtitles — 对话的翻译或文字记录
captions — 对话加声音描述，供聋人用户使用
descriptions — 为盲人用户提供的视觉内容音频描述
chapters — 用于导航的章节标题
metadata — 供 JavaScript 使用的机器可读数据

章节轨道

使用章节类型实现视频章节导航：

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

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

JavaScript 文本轨道应用程序接口

使用 TextTrack 应用程序接口访问轨道数据：

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

用于交互式视频的元数据轨道

使用元数据轨道在特定时间触发 JavaScript 事件：

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

可访问性要求

WCAG 要求预先录制的视频提供字幕：

Level A — 所有带音频的预先录制视频都必须提供字幕
Level AA — 所有预先录制的视频都必须提供音频描述
如果未经审核，自动生成的字幕（YouTube）是不够的
字幕必须准确、同步且完整

快速检查

subtitles 和 captions 这两种轨道类型有什么区别？

回顾：轨道与 WebVTT

副字幕和字幕要点：

在 video 中使用 <track src kind srclang label default>
kind 类型：subtitles、captions、descriptions、chapters、metadata
WebVTT 文件格式：WEBVTT + 时间戳 --> 时间戳 + 文本
使用 ::cue CSS 伪元素设置提示样式
WCAG 要求预先录制的视频提供字幕

常见问题解答

「使用 track 和 WebVTT 添加字幕」课时是免费的吗？

是的 — 「使用 track 和 WebVTT 添加字幕」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「使用 track 和 WebVTT 添加字幕」这节课中我会学到什么？

使用 track 和 .vtt 文件为视频添加说明字幕和字幕你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 track 和 WebVTT 添加字幕」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy