WebVTT 教程

像素行者

于 2025-04-07 14:39:22 发布

阅读量910

点赞数 29

分类专栏： HTML 文章标签：前端

本文链接：https://blog.csdn.net/wscfan/article/details/147043689

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

WebVTT 教程

简介

WebVTT (Web Video Text Tracks) 是一种用于显示定时文本轨道的格式，主要用于在 HTML5 视频中添加字幕、标题和描述。它是 HTML5 <track> 元素的标准文本轨道格式，支持多语言字幕、样式设置以及其他高级功能。

主要用途

字幕：为视频提供多语言字幕
隐藏式字幕：为听障人士提供访问支持
描述：添加视频内容的文字描述
章节标记：标记视频的不同章节或段落
元数据：提供不可见的元数据信息

WebVTT 文件基本结构

文件格式

WebVTT 文件是纯文本文件，使用 UTF-8 编码，文件扩展名为 .vtt。

基本结构

WEBVTT

1
00:00:01.000 --> 00:00:04.000
第一行字幕

2
00:00:05.000 --> 00:00:09.000
第二行字幕

一个标准的 WebVTT 文件包含以下部分：

文件头：必须以 WEBVTT 开头
可选注释：以 NOTE 开头的行
字幕条目

：由以下部分组成：
- 可选的标识符（数字或文本）
- 时间轴（起始时间 --> 结束时间）
- 字幕文本（可以是多行）
- 空行（用于分隔不同的字幕条目）

时间格式

时间格式为：小时:分钟:秒.毫秒

例如：00:01:25.432 表示 1 分 25 秒 432 毫秒

对于不足 1 小时的视频，可以省略小时部分：分钟:秒.毫秒，例如：01:25.432

字幕格式设置

WebVTT 支持多种字幕样式设置，可以通过 CSS 或内联样式来实现。

CSS 样式设置

在 HTML 中，可以使用 CSS 选择器来设置字幕样式：

<style>
  ::cue {
    color: white;
    background-color: black;
    font-size: 1.2em;
  }
  
  ::cue(b) {
    color: yellow;
    font-weight: bold;
  }
</style>

内联样式设置

在 WebVTT 文件中，可以使用标签来设置样式：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
<b>粗体文本</b> 普通文本

2
00:00:05.000 --> 00:00:09.000
<i>斜体文本</i> 和 <u>下划线文本</u>

支持的标签包括：

... - 粗体
... - 斜体
... - 下划线
<ruby>...</ruby> - 注音标记
<rt>...</rt> - 注音文本
<v Speaker>...</v> - 语音（用于标识不同的说话者）

位置和对齐

可以在时间轴上添加设置来控制字幕的位置和对齐：

00:00:01.000 --> 00:00:04.000 position:10% align:start
左对齐位于屏幕 10% 位置的字幕

00:00:05.000 --> 00:00:09.000 position:90% align:end line:80%
右对齐位于屏幕 90% 位置，底部 80% 处的字幕

主要的定位属性：

position - 水平位置（0% 为左边缘，100% 为右边缘）
align - 对齐方式（start、center、end）
line - 垂直位置（0% 为顶部，100% 为底部）
size - 字幕区域的宽度（百分比）

高级功能

语音识别（Voice）

用于标识不同的说话者：

00:00:01.000 --> 00:00:04.000
<v 张三>你好，世界！</v>

00:00:05.000 --> 00:00:09.000
<v 李四>很高兴见到你！</v>

区域定义

可以预定义字幕显示区域：

WEBVTT

REGION
id:subtitleArea
width:40%
lines:3
regionanchor:0%,100%
viewportanchor:10%,90%

00:00:01.000 --> 00:00:04.000 region:subtitleArea
这段字幕将显示在预定义的区域中

注释

可以添加不会显示的注释：

WEBVTT

NOTE
这是一条注释，不会显示在视频中

00:00:01.000 --> 00:00:04.000
这是会显示的字幕

实际应用示例

在 HTML5 中使用 WebVTT

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<track> 元素的属性：

src - WebVTT 文件的路径
kind - 轨道类型（subtitles、captions、descriptions、chapters、metadata）
srclang - 字幕语言
label - 用户可见的标签
default - 设置为默认显示的轨道

通过 JavaScript 控制

const video = document.querySelector('video');
const track = video.textTracks[0]; // 获取第一个文本轨道

// 启用或禁用字幕
track.mode = 'showing'; // 显示字幕
track.mode = 'hidden';  // 隐藏字幕但仍然加载
track.mode = 'disabled'; // 完全禁用字幕

// 监听字幕变更事件
track.addEventListener('cuechange', function() {
  const cues = this.activeCues;
  if (cues.length > 0) {
    console.log('当前字幕:', cues[0].text);
  }
});