WebVTT字幕 (.vtt)

W3C 标准

网页视频文本轨道(WebVTT)是 W3C 官方的网页标准,用于字幕、说明和章节描述,原生集成到 HTML5 视频元素(<track>)和现代 HTTP 实时流传输(HLS)中。

将 SRT 转换为 VTT

免费的浏览器端 SRT 转 VTT 转换器。在您的设备上即时转换文件。

检查与元数据

操作系统和文件分析器通过检查开头的二进制字节序列来识别 WebVTT 文件:

选择或将文件拖放到此处

100% 浏览器端私密转换 - 文件绝不会离开您的设备

或粘贴 Ctrl+V
零网络传输隐私保证: 上传至外部服务器的数据为 0 字节。所有处理均在您的浏览器沙箱中本地完成。

字节级文件头签名 (Magic Bytes)

操作系统和文件分析器通过检查开头的二进制字节序列来识别 WebVTT 文件:

十六进制签名 (偏移量 0):

57 45 42 56 54 54

ASCII 表示形式: WEBVTT

标准化: W3C WebVTT Recommendation

技术规格

容器架构UTF-8 text file starting with 'WEBVTT' signature, followed by optional STYLE and NOTE blocks and sequential cue blocks
压缩方式Uncompressed plain text (typically compressed over HTTP via Gzip or Brotli)
字节序UTF-8 text stream
色彩空间Full CSS Color Module Level 4 support in cue styles
通道与结构Timecoded cues, speech recognition confidence, CSS styling, and screen position settings
最大尺寸Unbounded sequential cues
透明度Full CSS opacity and alpha transparency supported via '::cue' pseudo-element
流式传输与渐进式加载Native streaming in HTML5 <video> elements and HLS / DASH live video manifests

技术对比矩阵:WebVTT 对比同类产品

技术属性WebVTT (当前)SRTASSSUB
HTML5 网页集成100% 原生标准 (<track>)需要 JS 转换需要 WebAssembly需要转换
CSS 样式完全原生 CSS 样式 (::cue)仅基础 HTML 标签专有覆盖标签
HLS / DASH 流媒体通用流媒体广播标准通过混流支持有限的流媒体支持
标头要求严格的 'WEBVTT' 魔术文本第 1 行无需标头[Script Info] 部分无需标头

常见损坏模式与十六进制恢复指南

浏览器控制台错误:'Malformed WebVTT file: Missing WEBVTT signature'(WebVTT 文件格式错误:缺少 WEBVTT 签名)。

根本原因: 第 1 行缺少 'WEBVTT' 字符串,或者标头之前存在空行。

恢复方法: 使用 File2File 字幕转换器在文件顶部添加 'WEBVTT\n\n'。

安全分析与解析器攻击向量

网页浏览器中的 WebVTT 解析器会处理不可信的提示,如果未经清理就渲染到 DOM 中,可能会导致跨站脚本攻击(XSS)。

已知攻击向量

  • 通过插入网页视频播放器 DOM 中的未转义 HTML 提示内容进行 XSS 注入。
  • 在自动生成服务器端字幕缩略图期间发生服务器端请求伪造(SSRF)。
  • 通过格式错误的 CSS 提示选择器进行拒绝服务攻击。

防御性最佳实践:

历史渊源与里程碑

2019W3C 将 WebVTT(网页视频文本轨道格式)正式推进至候选推荐标准。
2011从 WebSRT 重命名为 WebVTT,以确立一个独立于经典 SubRip 的 W3C 标准。
2010WHATWG 引入 WebVTT 以解决 HTML5 <video> 标签的原生字幕问题。

核心优势与特点

  • 原生 HTML5 网页标准:所有网页浏览器在 <track> 元素中直接支持,无需外部库。
  • 丰富的 CSS 样式支持:使用原生的 '::cue' CSS 伪元素自定义颜色、字体、背景和位置。
  • 一流的直播支持:集成到 Apple HLS 和 MPEG-DASH 流媒体清单中用于广播字幕。

技术局限与劣势

  • 严格的标头要求:文件第一行必须包含确切的文本 'WEBVTT',否则浏览器会拒绝加载。
  • 句点毫秒分隔符('00:01:20.500')需要从传统的逗号分隔的 SRT 文件进行转换。
  • 较旧的非浏览器硬件播放器(如廉价的 USB 媒体盒)通常缺乏对 WebVTT 的原生支持。

趣味技术冷知识

  • 每个有效的 WebVTT 文件必须在第一行以精确的单词 'WEBVTT' 开头;任何其他内容都会导致浏览器忽略该文件。
  • WebVTT 最初被称为 'WebSRT',因为它的设计刻意使其看起来与传统的 SRT 字幕几乎完全相同。
  • WebVTT 还可以用于视频章节以及悬停在视频进度条上时的交互式缩略图提示。

常见技术问题

WebVTT 用于什么?

WebVTT 是官方的网络标准格式,用于在网站的 HTML5 <video> 元素中添加字幕、标题、章节和描述。

如何将 SRT 字幕转换为 WebVTT?

您可以直接在浏览器中使用 File2File.app,一键将 SRT 文件转换为干净的 WebVTT 文件。

为什么我的 WebVTT 字幕无法在浏览器中显示?

请确保您的文件第 1 行以 'WEBVTT' 开头,后面有一个空行,并且您的网络服务器在提供该文件时带有 'Content-Type: text/vtt' 响应头。