track标签怎么添加字幕-html教程-PHP中文网

使用<track>标签为HTML视频添加字幕，需正确设置kind、src、srclang、label和default属性，并确保WebVTT文件格式正确、路径无误、服务器MIME类型配置恰当，同时可通过line、position等参数控制字幕样式，实现多语言支持与无障碍功能，提升用户体验。

track标签怎么添加字幕

要在HTML中为视频添加字幕，最直接且标准的方式就是利用

<video>

登录后复制

标签内部的

<track>

登录后复制

标签。它就像是给你的视频内容挂上了一张说明书，这张说明书（通常是WebVTT格式的文件）会告诉浏览器在特定时间点显示哪些文字，从而实现字幕、标题、描述等多种辅助功能。

解决方案

为视频添加字幕的核心在于正确使用

<track>

登录后复制

标签，并准备好对应的WebVTT字幕文件。这个过程比你想象的要简单，但有些细节值得注意。

首先，你的HTML结构大概是这样的：

<video controls width="640" height="360">
  <source src="your-video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
  <!-- 还可以添加其他语言的字幕 -->
  您的浏览器不支持视频播放。
</video>

登录后复制

这里，

<track>

登录后复制

标签有几个关键属性：

```
kind
```
登录后复制
：这是最重要的属性之一，它定义了轨道文本的类型。对于字幕，我们通常用
```
subtitles
```
登录后复制
。其他的还有
```
captions
```
登录后复制
（通常是同一语言，但包含更多背景音信息，为听障人士服务）、
```
descriptions
```
登录后复制
（文本描述视频内容，为视障人士服务）、
```
chapters
```
登录后复制
（视频章节，方便导航）和
```
metadata
```
登录后复制
（脚本使用的元数据，通常不可见）。
```
src
```
登录后复制
：指向你的WebVTT字幕文件的URL。这个路径一定要正确，否则浏览器找不到文件，字幕自然就出不来了。
```
srclang
```
登录后复制
：指定字幕内容的语言。这是非常重要的，特别是当你提供多语言字幕时，浏览器会根据用户的语言偏好来选择默认显示哪一个。
```
label
```
登录后复制
：这是用户在视频播放器界面中看到的字幕选项名称，比如“中文”或“English”。一个清晰的标签能大大提升用户体验。
```
default
```
登录后复制
：如果设置了这个属性，表示这个字幕轨道将是默认启用的。在一个视频中，通常只会有一个
```
default
```
登录后复制
字幕。

接下来，就是你的WebVTT文件了。它是一个纯文本文件，内容格式如下：

WEBVTT

1
00:00:01.000 --> 00:00:03.500
这是一段示例字幕。

2
00:00:04.000 --> 00:00:07.000
你可以在这里添加更多内容。
甚至可以分行。

NOTE
这是一个注释，不会显示。

3
00:00:08.000 --> 00:00:10.000 line:80%
还可以为字幕指定样式，比如位置。

登录后复制

WebVTT文件以

WEBVTT

登录后复制

开头，接着是字幕块。每个字幕块由一个编号（可选）、时间戳（

开始时间 --> 结束时间

登录后复制

）和字幕文本组成。时间戳的格式是

HH:MM:SS.mmm

登录后复制

。你甚至可以在时间戳后面加上样式信息，比如

line:80%

登录后复制

来调整字幕的垂直位置。我个人觉得WebVTT的这种简洁性，让它在处理多语言和复杂场景时显得非常灵活。

WebVTT文件应该如何编写？有哪些高级用法？

编写WebVTT文件，基础格式我刚才已经提到了，就是

WEBVTT

登录后复制

头加上一系列时间戳和文本。但要说高级用法，那可就多了。它不仅仅是简单的文字显示，还能实现一些非常酷的效果。

首先，时间戳的精确性是关键。

00:00:01.000 --> 00:00:03.500

登录后复制

精确到毫秒，这意味着你可以非常精准地控制字幕的出现和消失。在我处理一些对白密集或节奏快的视频时，毫秒级的调整就显得尤为重要，否则字幕和语音不同步，体验会大打折扣。

其次，字幕块的标识符（可选）。虽然我上面的例子里写了

登录后复制

、

登录后复制

、

登录后复制

，但其实它们不是必须的。不过，如果你需要通过JavaScript来操作或引用特定的字幕块，给它们一个唯一的标识符（比如

cue-intro

登录后复制

）会非常方便。

WEBVTT

cue-intro
00:00:01.000 --> 00:00:03.500
欢迎来到我们的频道！

cue-main-point
00:00:04.000 --> 00:00:07.000
今天我们将讨论WebVTT的高级用法。

登录后复制

再来，样式和位置控制。这是WebVTT最吸引我的地方之一。你可以在时间戳后面添加各种设置，来控制字幕的显示方式：

```
line
```
登录后复制
：控制字幕的垂直位置。可以是百分比（
```
line:80%
```
登录后复制
，表示距离顶部80%）或行数（
```
line:2
```
登录后复制
，表示在第二行显示）。这在视频下方有重要信息，需要字幕显示在上方时特别有用。
```
position
```
登录后复制
：控制字幕的水平位置。
```
position:50%
```
登录后复制
表示水平居中。
```
align
```
登录后复制
：文本对齐方式，可以是
```
start
```
登录后复制
、
```
middle
```
登录后复制
或
```
end
```
登录后复制
。
```
size
```
登录后复制
：字幕框的宽度。
```
vertical
```
登录后复制
：让字幕垂直显示，这在一些亚洲语言（如日语）中可能会用到。

WEBVTT

00:00:01.000 --> 00:00:03.000 line:10% align:end
这段字幕会显示在视频顶部，右对齐。

00:00:04.000 --> 00:00:06.000 position:10% size:30%
这段字幕会在左侧显示，宽度较窄。

登录后复制

这些样式属性在处理复杂的视频布局，或者需要突出某些信息时，能提供很大的灵活性。我曾经用

line

登录后复制

属性把字幕调整到视频画面的上半部分，以避免遮挡视频下方的关键图表，效果非常理想。

最后，WebVTT文件中的HTML标签。你可以在字幕文本中嵌入部分HTML标签，比如

<b>

登录后复制

（加粗）、

<i>

登录后复制

（斜体）、

<u>

登录后复制

（下划线）、

<c>

登录后复制

（自定义样式类）和

<v>

登录后复制

（语音标签）。这意味着你可以对字幕的某些部分进行格式化，甚至为不同说话者指定不同的样式。

WEBVTT

00:00:01.000 --> 00:00:04.000
<v John Doe><b>大家好！</b></v> 欢迎收看。

00:00:05.000 --> 00:00:08.000
<v Jane Smith><i>今天天气真好。</i></v>

登录后复制

结合

<c.className>

登录后复制

，你可以通过CSS来控制字幕的颜色、字体大小等，让字幕与你的品牌风格更贴合。这在我看来，是WebVTT从一个简单的文本显示工具，跃升为强大辅助功能的关键。

为什么我的字幕没有显示出来？常见错误排查

我遇到过无数次这样的问题：“我的

<track>

登录后复制

标签都写好了，WebVTT文件也放上去了，为什么字幕就是不显示？”这通常不是什么大问题，往往是一些小细节没处理好。以下是我总结的一些常见错误和排查方法：

src
登录后复制
路径错误：这是最常见的问题。浏览器找不到你的WebVTT文件，自然就没法显示。
- 排查：打开浏览器的开发者工具（F12），切换到“网络”（Network）标签页。刷新页面，看看有没有针对你的WebVTT文件的404错误（Not Found）。确保
```
src
```
  登录后复制
  属性中的路径是相对于HTML文件或网站根目录的正确路径。比如，如果HTML和VTT文件在同一个文件夹，
```
src="subtitles.vtt"
```
  登录后复制
  就够了。如果VTT在
```
./assets/subtitles/
```
  登录后复制
  下，那
```
src="assets/subtitles/subtitles.vtt"
```
  登录后复制
  。
WebVTT文件格式不正确：WebVTT对格式有严格要求。
- 排查：
  - 文件第一行必须是
```
WEBVTT
```
    登录后复制
    ，且后面不能有空行或多余字符。
  - 时间戳格式必须是
```
HH:MM:SS.mmm --> HH:MM:SS.mmm
```
    登录后复制
    ，精确到毫秒，且箭头前后有空格。
  - 每个字幕块之间必须有一个空行。
  - 确保文件编码是UTF-8。如果不是，中文字符可能会乱码或导致整个文件解析失败。我通常会用文本编辑器（如VS Code）确认文件编码。
服务器MIME类型配置问题：有些服务器可能没有正确配置
```
.vtt
```
登录后复制
文件的MIME类型。浏览器在请求文件时，会根据MIME类型来判断文件内容。
- 排查：在开发者工具的“网络”标签页中，点击你的WebVTT文件请求，查看响应头（Response Headers）。
```
Content-Type
```
  登录后复制
  应该是
```
text/vtt
```
  登录后复制
  。如果不是，你可能需要配置你的服务器（Apache的
```
.htaccess
```
  登录后复制
  、Nginx的
```
nginx.conf
```
  登录后复制
  等）来添加这个MIME类型。
kind
登录后复制
属性设置不正确：虽然不太常见，但如果你把
```
kind
```
登录后复制
设置成了
```
metadata
```
登录后复制
或
```
descriptions
```
登录后复制
，这些轨道可能不会在视频播放器界面直接显示为“字幕”选项。
- 排查：确保你想要显示为字幕的轨道
```
kind="subtitles"
```
  登录后复制
  或
```
kind="captions"
```
  登录后复制
  。
浏览器兼容性问题：虽然现代浏览器对
```
<track>
```
登录后复制
标签的支持都很好，但偶尔也会遇到一些老旧浏览器或特定版本的问题。
- 排查：尝试在不同的浏览器（Chrome, Firefox, Edge, Safari）中测试。如果只在特定浏览器有问题，那可能需要考虑Polyfill或提供备用方案。
default
登录后复制
属性冲突：如果你有多个
```
track
```
登录后复制
标签都设置了
```
default
```
登录后复制
属性，浏览器可能会感到困惑，或者只选择其中一个。
- 排查：确保在一个
```
<video>
```
  登录后复制
  标签中，只有一个
```
track
```
  登录后复制
  标签带有
```
default
```
  登录后复制
  属性。
视频控件未启用：如果
```
<video>
```
登录后复制
标签没有
```
controls
```
登录后复制
属性，用户就无法看到播放器界面，自然也无法选择或开启字幕。
- 排查：确认你的
```
<video>
```
  登录后复制
  标签有
```
controls
```
  登录后复制
  属性。

在我看来，排查这类问题，最有效的方法就是“分步验证”。先确保WebVTT文件本身没有语法错误，再检查

src

登录后复制

路径，然后是服务器配置，最后才是浏览器行为。一步步缩小范围，问题很快就能浮出水面。

除了字幕，track标签还能用来做什么？

<track>

登录后复制

标签的强大之处远不止于提供字幕。它通过

kind

登录后复制

属性的多种值，为视频内容提供了丰富的辅助功能，极大地提升了视频的可访问性和用户体验。这不仅仅是为了遵守无障碍标准，更是为了让你的内容能够触达更广泛的受众。

```
captions
```
登录后复制
(隐藏式字幕)
- 用途：与
```
subtitles
```
  登录后复制
  类似，但通常用于同一语言。它不仅包含对话，还会描述背景音效（如
```
[狗叫声]
```
  登录后复制
  、
```
[音乐响起]
```
  登录后复制
  、
```
[门铃声]
```
  登录后复制
  ），以及说话者的身份。这对于听障人士来说至关重要，因为他们不仅需要知道说了什么，还需要了解声音环境。
- 示例：
  
  快转字幕
  新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。
  
  357
  
  查看详情
```
<track kind="captions" src="captions-en.vtt" srclang="en" label="English Captions">
```
  登录后复制
  WebVTT文件内容可能包含：
```
WEBVTT

00:00:01.000 --> 00:00:03.000
[鸟鸣声]

00:00:03.500 --> 00:00:06.000
<v Alice>早上好！</v>
```
  登录后复制
  在我看来，
```
captions
```
  登录后复制
  是真正体现网络内容包容性的一个功能。它超越了简单的翻译，考虑到了不同用户的感知需求。
```
descriptions
```
登录后复制
(视频描述)
- 用途：为视障用户提供视频内容的文本描述。当视频中出现视觉信息（如画面切换、人物动作、场景变化）而没有语音解释时，
```
descriptions
```
  登录后复制
  轨道会提供相应的文字说明。这些描述通常由屏幕阅读器朗读出来。
- 示例：
```
<track kind="descriptions" src="descriptions-en.vtt" srclang="en" label="Audio Description">
```
  登录后复制
  WebVTT文件内容：
```
WEBVTT

00:00:01.000 --> 00:00:04.000
[画面：一个男人走进房间，手里拿着一束鲜花，脸上带着微笑。]

00:00:05.000 --> 00:00:08.000
[画面：他把花递给坐在沙发上的女人，女人惊喜地接过。]
```
  登录后复制
  这个功能在很多教育、新闻或电影内容中都非常有价值。它确保了即便无法看到画面，用户也能理解视频传达的信息。
```
chapters
```
登录后复制
(章节)
- 用途：将视频内容分割成逻辑章节，方便用户在播放器中快速跳转到感兴趣的部分。这对于长视频，如讲座、教程或纪录片，特别有用。
- 示例：
```
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters">
```
  登录后复制
  WebVTT文件内容：
```
WEBVTT

00:00:00.000 --> 00:00:30.000
引言：什么是WebVTT？

00:00:30.000 --> 00:01:45.000
基础用法：track标签详解

00:01:45.000 --> 00:03:00.000
高级技巧：样式与位置
```
  登录后复制
  我在观看一些技术分享视频时，如果能有章节功能，体验会好很多，可以快速回顾某个知识点，而不用拖动进度条碰运气。
```
metadata
```
登录后复制
(元数据)
- 用途：提供与视频内容相关的额外数据，这些数据通常不会直接显示给用户，而是供脚本（JavaScript）读取和处理。它可以用于同步视频中的事件、触发动画、显示补充信息等。
- 示例：
```
<track kind="metadata" src="metadata.vtt" srclang="en">
```
  登录后复制
  WebVTT文件内容：
```
WEBVTT

00:00:05.000 --> 00:00:05.001
{"event": "highlight", "id": "section-intro"}

00:00:10.000 --> 00:00:10.001
{"event": "show_quiz", "question_id": "q1"}
```
  登录后复制
  通过JavaScript监听
```
track
```
  登录后复制
  元素的
```
cuechange
```
  登录后复制
  事件，可以获取当前激活的元数据，并根据这些数据执行相应的操作。这为视频内容的交互性开辟了新的可能性，比如在视频播放到某个时间点时，自动弹出相关的练习题或信息卡片。这在我看来，是
```
<track>
```
  登录后复制
  标签在纯内容展示之外，最具开发潜力的一个方向。