subtool

在线字幕翻译

首页/
帮助中心/
WebVTT 协议指南

WebVTT 协议指南

步骤 1

WEBVTT

文件标识符

每个 WebVTT 文件必须以 WEBVTT 作为文件的第一行，且必须单独占一行。这是文件格式的标识符，用于告知解析器这是一个 WebVTT 格式的字幕文件。

WebVTT 文件必须使用 UTF-8 编码。

步骤 2

00:00:01.000 --> 00:00:03.000
Hello, world!

或带标识符：

subtitle-001
00:00:01.000 --> 00:00:03.000
Hello, world!

字幕条目（cue）

每个字幕条目由以下部分组成：

  • 可选的标识符：用于引用该字幕，不能包含 --> 或换行符
  • 时间轴：格式为 开始时间 --> 结束时间
  • 字幕文本：显示的字幕内容，可以包含多行

cue 与 cue 之间用空行隔开

时间格式为：

  • HH:MM:SS.mmm（小时:分钟:秒.毫秒）
  • 或 MM:SS.mmm（分钟:秒.毫秒）

其中分钟和秒部分为必需。

步骤 3

WEBVTT

NOTE
这是一段注释。
注释可以是一行，也可以是多行。

NOTE
并且可以有多个注释。
注释还可以和cue交替出现

注释（NOTE）

NOTE：注释，用于添加作者说明，不会显示到屏幕上。

注释的内容可以是一行，也可以是多行。 一个字幕文件可以有多处注释。

步骤 4

Example:

WEBVTT

00:00:32.500 --> 00:00:34.500
To grow up on these shores. To witness this water, every day

Original image.图 1：字幕未增加任何修饰

WEBVTT

00:00:32.500 --> 00:00:34.500 size:30%
To grow up on these shores. To witness this water, every day

size equals 30% image.图 2：size:30% (默认position:50%, align:center)

WEBVTT

00:00:32.500 --> 00:00:34.500 size:30% position:20%
To grow up on these shores. To witness this water, every day

size equals 30% position equals 20% image.图 3：size:30% position:20% (默认align:center)

WEBVTT

00:00:32.500 --> 00:00:34.500 size:30% position:20% align:left
To grow up on these shores. To witness this water, every day

size equals 30% position equals 20% align left image.图 4：size:30% position:20% align:left

WEBVTT

00:00:32.500 --> 00:00:34.500 size:30% position:20% align:right
To grow up on these shores. To witness this water, every day

size equals 30% position equals 20% align right image.图 5：size:30% position:20% align:right

时间轴设置

在时间轴后面可以添加可选的设置参数，用空格分隔：

  • size：字幕区域宽度，范围 0-100%
    可以想象成屏幕上的字幕是位于一个盒子（cue-box）中，size意味着这个盒子占据屏幕宽度的百分比
  • position：水平位置，范围 0-100%，默认居中（50%） 字幕位于水平方向的位置，从屏幕左侧到右侧意味着0%~100%，该属性和align相关。align属性的值表示字幕盒子的哪个边和position对齐。
  • align：对齐方式，可选值 start、center（默认）、end、left、right
    start、end选项尊重语言的左右顺序，如果是右到左的语言，比如阿拉伯语，希伯来语，start意味着右侧，end意味着左侧

步骤 5

WEBVTT

STYLE
::cue {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}
::cue(v[voice="John"]) {
  color: #FFD700;
  font-weight: bold;
}
::cue(.cn) {
  color: #00FF88;
}

样式（STYLE）

STYLE 区域用于定义字幕的 CSS 样式，必须位于 头部区域之后、首个字幕条目之前。

常用的 CSS 选择器：

  • ::cue：选择所有字幕文本
  • ::cue(.class)：选择特定类的文本
  • ::cue(v[voice])：选择特定声音标签
  • ::cue([lang="en-US"])：选择指定的语言
  • ::cue-region：选择所有region字幕文本
  • ::cue-region(#id)：选择指定id的region字幕文本

支持的 CSS 属性包括颜色、字体、背景、文本对齐等，但功能有限制。

步骤 6

00:00:10.000 --> 00:00:12.000
<b>粗体文本</b>

00:00:10.000 --> 00:00:12.000
<i>斜体文本</i>

00:00:10.000 --> 00:00:12.000
<u>下划线文本</u>

Example:

WEBVTT

00:00:32.500 --> 00:00:34.500
To <b>grow up</b> on these <u>shores</u>. To witness this water, <i>every day</i>

text style tag image.文本格式标签

文本格式标签

WebVTT 支持以下文本格式标签：

  • <b>：粗体
  • <i>：斜体
  • <u>：下划线
  • <v>：声音标签，用于标识说话者
  • <c>：自定义类名标签，可同时包含多个类名（如 <c.red.bg_yellow>）

<v>和<c>下面章节单独讨论

步骤 7

Example:

WEBVTT

STYLE
::cue(v[voice="Alice"]) { 
    color: cyan; 
}
::cue(v[voice="Bob"]) { 
    color: yellow 
}

00:00:32.500 --> 00:00:34.500
<v Alice>To grow up on these shores.</v>
<v Bob>To witness this water, every day</v>

voice tag image.声音标签

声音标签 <v>

<v> 标签用于标识说话者： 示例中说话者名为 Alice 和 Bob。 这样指定的说话人，并不会在字幕中显示出来，而是通过样式、位置等其他方式来区分。 通过 CSS 可以使用 ::cue(v[voice="Alice"]) 为特定说话者设置样式。

注意：STYLE样式中不能出现空行。

步骤 8

00:00:20.000 --> 00:00:22.000
<c.highlight>重要信息</c>

00:00:22.500 --> 00:00:24.000
<c.cn>中文翻译</c>

00:00:24.500 --> 00:00:26.000
普通文本 <c.sound>[音效]</c>

Example:

WEBVTT

STYLE
::cue(c) {
    color:#4E71FF;
    background-color:#DDF4AA;
}
::cue(c.highlight) {
    font-size:30px;
    font-weight:800;
    color:yellow;
    background-color:green;
}

00:00:32.500 --> 00:00:34.500
<c>To grow up on these shores.</c>
<c.highlight>To witness this water, every day</c>

custom tag image.文本格式标签

自定义类标签 <c>

<c> 标签允许为文本片段添加自定义类名，用于 CSS 样式控制。

语法：<c.类名>文本</c>

常见的应用场景：

  • 多语言字幕（如中英文对照）
  • 特殊效果标识（如音效、背景音乐）
  • 重要信息高亮

协议中还规定了类似 <c.red.bg_yellow> 的样式，播放器需支持一组颜色样式，包括字幕颜色(https://w3c.github.io/webvtt/#default-text-color)、背景颜色(https://w3c.github.io/webvtt/#default-text-background)，当使用这些内置样式时，无需字幕创作者指定STYLE。

注意：内置的字幕颜色、背景颜色：VLC等播放器支持得很好，浏览器HTML video 标签几乎不支持。

步骤 9

WEBVTT

REGION
id:top
width:100%
lines:2
regionanchor:0%,0%
viewportanchor:0%,0%
scroll:up

REGION
id:bottom
width:100%
lines:3
regionanchor:0%,100%
viewportanchor:0%,100%

Example:

WEBVTT

STYLE
::cue-region(#top) {
  color: yellow;
}

REGION
id:top
viewportanchor:0%,20%

00:00:32.500 --> 00:00:34.500 region:top
To grow up on these shores. To witness this water, every day

region anchor image.区域锚点（VLC播放器中截图）

区域（REGION）

REGION 用于定义字幕显示区域，允许在屏幕的不同位置显示字幕。 通过在时间轴设置中使用 region:区域ID 来指定字幕显示在哪个区域。

主要属性：

  • id：区域标识符，在字幕条目中通过 region:id 引用
  • width：区域宽度
  • lines：最大行数
  • regionanchor：区域锚点（如 0%,0%）
  • viewportanchor：视口锚点（如 0%,100%）
  • scroll：滚动方式（up 表示向上滚动）

注意：播放器应用支持部分属性，浏览器几乎不支持

viewportanchor and regionanchor imageregions中viewportanchor和regionanchor的含义。图片引用

Copyright © 2025 subtool.cc