HTML视频字幕文件支持哪些格式？vtt文件格式如何解析

在网页中嵌入视频并添加字幕是提升内容可访问性的重要手段，很多开发者在开发过程中首先会遇到的问题就是HTML视频字幕文件支持哪些格式，以及常用的vtt文件该如何解析。下面我们就围绕这两个核心问题展开说明。

HTML视频支持的字幕文件格式

HTML5的<video>元素通过<track>标签来添加字幕，目前主流浏览器支持的字幕格式主要有以下几种：

• WebVTT（.vtt）：这是W3C推荐的标准网页字幕格式，所有现代浏览器都原生支持，也是目前最推荐使用的格式。
• SRT（.srt）：传统的字幕格式，部分浏览器可以通过额外处理支持，但原生兼容性不如vtt，不建议作为首选。
• TTML（.ttml）：时序文本标记语言，主要用于专业字幕场景，浏览器支持度较低，一般不用于普通网页开发。

需要注意的是，使用字幕时需要在<track>标签中指定正确的srclang和kind属性，比如kind="subtitles"表示字幕，srclang="zh"表示中文字幕，否则可能无法正常加载。

vtt文件格式结构解析

vtt文件是纯文本格式，整体结构有固定的规范，主要由文件头、字幕块、注释、样式等部分组成，下面我们逐一拆解。

1. 文件头

所有vtt文件必须以WEBVTT开头，后面可以跟可选的注释或文件说明，比如：

WEBVTT
这是一个示例vtt字幕文件

2. 字幕块

字幕块是vtt文件的核心部分，每个字幕块对应一段字幕内容，结构如下：

00:00:05.000 --> 00:00:10.000
这是第一段字幕内容，会在视频播放到5秒到10秒时显示

其中时间格式为时:分:秒.毫秒，开始时间和结束时间用-->连接，时间后面可以直接跟字幕文本，也可以添加额外的样式或位置标识。

3. 可选标识与样式

vtt支持给字幕块添加标识，也支持内联样式设置，比如指定字幕显示位置：

00:00:15.000 --> 00:00:20.000 line:10% position:50% align:middle
这是居中显示在画面10%高度位置的字幕

前端解析vtt文件的实现方法

如果需要在前端自定义处理vtt字幕，比如提取字幕内容、修改字幕样式，我们可以手动解析vtt文件内容，下面是一段基础的解析示例代码：

// 解析vtt字幕内容的基础函数
function parseVtt(vttText) {
  const lines = vttText.split('\n');
  const subtitles = [];
  let currentSub = null;

  for (let line of lines) {
    line = line.trim();
    // 跳过空行和文件头
    if (!line || line === 'WEBVTT') continue;
    // 匹配时间行，格式为 00:00:00.000 --> 00:00:00.000
    const timeMatch = line.match(/(\d{2}:\d{2}:\d{2}\.\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2}\.\d{3})/);
    if (timeMatch) {
      // 如果已有上一个字幕块，先存入数组
      if (currentSub) {
        subtitles.push(currentSub);
      }
      // 创建新的字幕块
      currentSub = {
        startTime: timeMatch[1],
        endTime: timeMatch[2],
        text: ''
      };
    } else if (currentSub) {
      // 非时间行，作为当前字幕块的文本内容
      currentSub.text += (currentSub.text ? '\n' : '') + line;
    }
  }
  // 存入最后一个字幕块
  if (currentSub) {
    subtitles.push(currentSub);
  }
  return subtitles;
}

// 使用示例：加载vtt文件并解析
fetch('subtitles.vtt')
  .then(res => res.text())
  .then(vttText => {
    const subtitleList = parseVtt(vttText);
    console.log('解析到的字幕列表：', subtitleList);
  });

上述代码会逐行读取vtt文本内容，识别时间行来划分不同的字幕块，最终返回包含所有字幕开始时间、结束时间和文本内容的数组，开发者可以根据这个数组实现自定义的字幕渲染逻辑。

注意事项

在实际使用vtt字幕时，还需要注意几个细节：首先vtt文件的编码需要是UTF-8，否则可能出现中文乱码；其次如果字幕内容包含特殊字符，不需要额外转义，vtt格式本身支持直接写入中文和常见符号；最后如果是跨域加载字幕文件，需要服务端配置对应的CORS头，否则浏览器会阻止加载。

HTML_videoWebVTTvtt_formatsubtitle_parsing修改时间：2026-05-26 20:05:12