WebVTT 字幕 (.vtt)

W3C 標準

Web Video Text Tracks(WebVTT)是 W3C 針對說明文字、字幕與章節描述所推出的官方網路標準,已原生整合至 HTML5 影片元素(<track>)與現代 HTTP 即時串流(HLS)中。

將 SRT 轉換為 VTT

免費的瀏覽器端 SRT 轉 VTT 轉換器。在您的裝置上即時轉換檔案。

檢查與中繼資料

作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 WebVTT 檔案:

在這裡選擇或拖放檔案

私密 - 檔案絕不會離開您的裝置

或貼上 Ctrl+V
零網路傳輸隱私保證: 0 位元組上傳至外部伺服器。所有處理皆在本機瀏覽器沙箱中進行。

位元組層級標頭簽章(檔案簽章)

作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 WebVTT 檔案:

十六進位簽章(偏移量 0):

57 45 42 56 54 54

ASCII 表示法: WEBVTT

標準化: W3C WebVTT 建議標準

技術規格

容器架構以 'WEBVTT' 簽章開頭的 UTF-8 文字檔案,後接選用的 STYLE 與 NOTE 區塊以及循序的字幕時間點區塊
壓縮未壓縮的純文字(通常透過 Gzip 或 Brotli 在 HTTP 上進行壓縮)
位元組序UTF-8 文字串流
色彩空間字幕樣式完整支援 CSS Color Module Level 4
色版與結構帶有時間碼的字幕、語音辨識信賴度、CSS 樣式以及畫面位置設定
最大尺寸無限制的循序字幕
透明度透過 '::cue' 偽元素支援完整的 CSS 不透明度與 alpha 透明度
串流與漸進式原生支援 HTML5 <video> 元素與 HLS / DASH 即時影片資訊清單中的串流

技術比較矩陣:WebVTT 對比競爭格式

技術屬性WebVTT (目前)SRTASSSUB
HTML5 網路整合100% 原生標準(<track>)需要 JS 轉換需要 WebAssembly需要轉換
CSS 樣式完整原生 CSS 樣式(::cue)僅基本 HTML 標籤專有覆寫標籤無
HLS / DASH 串流WebVTT 用於瀏覽器影片與部分串流播放清單中的計時文字軌;播放器支援度取決於傳遞格式。透過多工處理(muxing)支援有限的串流支援無
標頭要求第 1 行必須嚴格為「WEBVTT」檔案簽章文字不需要標頭[Script Info] 區段不需要標頭

常見損壞模式與十六進位修復指南

瀏覽器主控台錯誤:「Malformed WebVTT file: Missing WEBVTT signature」。

根本原因: 第 1 行缺少「WEBVTT」字串,或標頭之前有空白行。

修復: 使用 File2File.app 字幕轉換器將「WEBVTT\n\n」加到檔案頂端。

安全性分析與解析器攻擊向量

網路瀏覽器中的 WebVTT 解析器會處理不受信任的提示文字,如果未經清除就算繪至 DOM 中,可能會導致跨網站指令碼攻擊(XSS)。

已知攻擊向量

  • 透過未清除且插入網路影片播放器 DOM 的 HTML 提示文字內容進行 XSS 攻擊。
  • 在自動伺服器端字幕縮圖產生期間的伺服器端請求偽造(SSRF)。
  • 透過格式錯誤的 CSS 提示文字選擇器造成阻斷服務。

防禦最佳實務: 依賴原生瀏覽器 <track> 算繪,並在手動插入 DOM 之前清除提示文字酬載。

歷史起源與里程碑

2019W3C 正式推動 WebVTT:Web Video Text Tracks 格式邁向提議推薦標準(Proposed Recommendation)階段。
2011從 WebSRT 更名為 WebVTT,藉此建立一個獨立於傳統 SubRip 之外的 W3C 標準。
2010WHATWG 引入 WebVTT,以解決 HTML5 <video> 標籤的原生字幕問題。

主要優勢與優點

  • HTML <track> 元素使用 WebVTT 來顯示說明文字與字幕。瀏覽器透過影片播放器來算繪字幕的時間點與樣式,不過支援的字幕功能可能會有一些差異。
  • 豐富的 CSS 樣式支援:使用原生「::cue」CSS 偽元素自訂顏色、字型、背景與位置。
  • HLS 與 MPEG-DASH 服務可以在影片片段旁提供 WebVTT 字幕軌。請檢查目標播放器是否支援播放清單的字幕封裝與語言軌。

技術限制與缺點

  • 嚴格的標頭要求:檔案第一行必須確切開頭為文字「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」標頭提供該檔案。