PHP小码农

Appearance

track 字幕与文本轨道 ​

<track> 元素为 <video> 和 <audio> 添加文本轨道，如字幕（subtitles）、说明（descriptions）、章节标记（chapters）和元数据（metadata）。本节将介绍 WebVTT 格式和 <track> 的各种属性用法。

前置知识

阅读本节前，建议先了解：source 媒体源

基础概念 ​

<track> 元素用于为音频和视频添加基于时间的文本数据。最常见的用途是添加多语言字幕，此外还可以用于音频描述、章节导航和元数据。字幕文件通常使用 WebVTT（Web Video Text Tracks） 格式。

字幕对无障碍访问至关重要——听障用户依赖字幕理解内容，母语非视频语言的用户通过翻译字幕跨越语言障碍。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>track 字幕</title>
</head>
<body>
  <h1>track 字幕</h1>

  <video controls width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
    <!-- 中文字幕 -->
    <track src="subtitles-zh.vtt"
           kind="subtitles"
           srclang="zh-CN"
           label="中文字幕"
           default>
    <!-- 英文字幕 -->
    <track src="subtitles-en.vtt"
           kind="subtitles"
           srclang="en"
           label="English">
  </video>
</body>
</html>

详细说明 ​

track 属性详解 ​

属性值说明
srcURLWebVTT 文件路径
kindsubtitles/captions/descriptions/chapters/metadata轨道类型
srclang语言代码轨道语言（如 zh-CN、en）
label字符串用户可见的标签
default布尔默认启用的轨道

kind 轨道类型 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>kind 类型</title>
</head>
<body>
  <h1>kind 轨道类型</h1>

  <video controls width="640" height="360">
    <source src="movie.mp4" type="video/mp4">

    <!-- subtitles：字幕（需要用户手动开启） -->
    <track src="subs-zh.vtt"
           kind="subtitles" srclang="zh" label="中文字幕" default>

    <!-- captions：说明（包含音效和环境描述，默认显示） -->
    <track src="captions-en.vtt"
           kind="captions" srclang="en" label="English Captions">

    <!-- descriptions：音频描述（供视障用户的独立音轨） -->
    <track src="descriptions-zh.vtt"
           kind="descriptions" srclang="zh" label="音频描述">

    <!-- chapters：章节（用于导航菜单） -->
    <track src="chapters.vtt"
           kind="chapters" srclang="zh" label="章节">

    <!-- metadata：元数据（不可见，供 JS 使用） -->
    <track src="metadata.vtt"
           kind="metadata" srclang="zh" label="元数据">
  </video>
</body>
</html>
kind 值说明用户可见默认显示
subtitles字幕翻译是否（用户手动开启）
captions说明（含音效描述）是可设为默认
descriptions音频描述（视障用户）否（通过屏幕阅读器）否
chapters章节导航是（导航菜单）否
metadata供脚本使用的元数据否否

subtitles vs captions

subtitles 仅包含对话翻译，假设用户能听到声音。captions 包含对话和所有音效描述（如"[背景音乐响起]"），适合听障用户。

WebVTT 文件格式 ​

WEBVTT

00:00:01.000 --> 00:00:04.000
欢迎观看 HTML5 教程

00:00:05.000 --> 00:00:08.000
今天我们来学习 track 标签

00:00:09.000 --> 00:00:12.500
track 可以给视频添加字幕

00:00:13.000 --> 00:00:16.000
字幕文件使用 WebVTT 格式

WebVTT 文件规则：

  • 文件以 WEBVTT 开头
  • 空行分隔各个字幕块
  • 时间格式：HH:MM:SS.mmm --> HH:MM:SS.mmm
  • 时间戳使用 --> 分隔

带 CSS 样式的 WebVTT ​

WEBVTT

STYLE
::cue {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 18px;
  font-family: sans-serif;
}

00:00:01.000 --> 00:00:04.000
<v 主持人>大家好，欢迎收看本期节目</v>

00:00:05.000 --> 00:00:08.000
<v 嘉宾>很高兴来到这里

NOTE
这里的注释不会显示给用户

多语言字幕 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多语言字幕</title>
</head>
<body>
  <h1>多语言字幕</h1>

  <video controls width="640" height="360">
    <source src="movie.mp4" type="video/mp4">

    <!-- 中文（默认） -->
    <track src="zh.vtt" kind="subtitles"
           srclang="zh-CN" label="中文" default>

    <!-- 英文 -->
    <track src="en.vtt" kind="subtitles"
           srclang="en" label="English">

    <!-- 日文 -->
    <track src="ja.vtt" kind="subtitles"
           srclang="ja" label="日本語">

    <!-- 韩文 -->
    <track src="ko.vtt" kind="subtitles"
           srclang="ko" label="한국어">
  </video>

  <p>用户可以通过播放器控件的"CC"按钮切换字幕语言。</p>
</body>
</html>

实战示例 ​

完整的视频字幕播放器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频字幕播放器</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    video {
      width: 100%;
      border-radius: 12px;
    }
    .subtitle-info {
      margin-top: 12px;
      padding: 12px;
      background: #f5f5f5;
      border-radius: 8px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>开源技术纪录片</h1>
  <p>探索开源运动的发展历程。</p>

  <video controls playsinline preload="metadata"
         poster="documentary-cover.jpg">
    <source src="documentary.webm" type="video/webm; codecs=vp9,opus">
    <source src="documentary.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

    <!-- 中文字幕（默认显示） -->
    <track src="subs/zh-CN.vtt"
           kind="subtitles" srclang="zh-CN"
           label="中文字幕" default>

    <!-- 英文字幕 -->
    <track src="subs/en.vtt"
           kind="subtitles" srclang="en"
           label="English Subtitles">

    <!-- 中文音频描述 -->
    <track src="desc/zh-CN.vtt"
           kind="descriptions" srclang="zh-CN"
           label="中文音频描述">

    <!-- 章节标记 -->
    <track src="chapters.vtt"
           kind="chapters" srclang="zh-CN"
           label="章节导航">
  </video>

  <div class="subtitle-info">
    <p>支持语言：中文、English | 点击 CC 图标切换字幕</p>
  </div>
</body>
</html>

注意事项 ​

  • WebVTT 文件必须以 WEBVTT 开头
  • srclang 在 kind="subtitles" 时是必需的
  • default 属性在同一种 kind 中只能设一个
  • WebVTT 文件的编码必须是 UTF-8
  • 字幕时间戳的精度到毫秒（.000）
  • kind="descriptions" 的内容通常通过屏幕阅读器朗读

最佳实践 ​

  • 为所有视频提供至少一种语言的字幕
  • 使用 kind="captions" 而非 kind="subtitles" 来提供完整音效描述
  • 设置一个 default 轨道，避免用户手动开启
  • 使用 CSS 样式化字幕以提高可读性
  • WebVTT 文件保持精简，每行不超过 80 个字符
  • 多语言字幕使用清晰的 label 命名

下一节

继续学习：媒体属性与 API

参考链接 ​