WebVTT 字幕 (.vtt)
W3C 標準Web Video Text Tracks(WebVTT)是 W3C 針對說明文字、字幕與章節描述所推出的官方網路標準,已原生整合至 HTML5 影片元素(<track>)與現代 HTTP 即時串流(HLS)中。
將 SRT 轉換為 VTT
免費的瀏覽器端 SRT 轉 VTT 轉換器。在您的裝置上即時轉換檔案。
檢查與中繼資料
作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 WebVTT 檔案:
位元組層級標頭簽章(檔案簽章)
作業系統與檔案分析工具透過檢查開頭的二進位位元組序列來識別 WebVTT 檔案:
十六進位簽章(偏移量 0):
57 45 42 56 54 54ASCII 表示法: 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 (目前) | SRT | ASS | SUB |
|---|---|---|---|---|
| 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」標頭提供該檔案。