學校網頁、機構宣傳頁、公司培訓平台，常常已經有一條校對過的廣東話 .srt，剪輯軟件裡播得好好。把同一檔丟進自己網站的 <video>，字幕選單卻空白，或瀏覽器直接拒絕載入。問題通常不是粵語辨識又失敗，而是 HTML5 文字軌只吃 WebVTT。廣東話 WebVTT 要先寫對檔頭、把時間碼的逗號改成句點，再掛 track；只改副檔名，播放器當它無效。
這篇寫給要把廣東話片嵌進自有網頁的人：學校 IT、NGO 網頁義工、品牌站、內部 LMS。YouTube Studio、Facebook 檔名、Premiere 時間軸各有自己的格式習慣，見 YouTube 廣東話字幕、Facebook 廣東話字幕、SRT 與 FCPXML。本文只處理：母帶如何變成網站播得著的 .vtt，以及 kind、語言標籤、同源限制這些網頁才會踩的坑。
讀完你應能自己完成三件事：把 UTF-8 的 SRT 轉成合法 VTT、在 <video> 裡掛一條觀眾看得懂標籤的軌、判斷這條片該軟字幕還是燒錄。
網站播放器跟剪輯軟件不是同一套檔
Premiere、Final Cut、CapCut、DaVinci 多數能匯入 SubRip（.srt）：沒有檔頭、每段前面有序號、毫秒用逗號，例如 00:00:04,200 --> 00:00:07,080。YouTube 官方亦列 SRT 為支援格式，並要求純 UTF-8。網頁不走這條路。
HTML 的 <track> 指向的是 WebVTT（.vtt）。MDN 寫明：文字軌格式是 WebVTT；src 必須是有效網址，而且預設要與頁面同源——除非父層的 <video> 或 <audio> 設了 crossorigin。瀏覽器不會把一份沒有 WEBVTT 檔頭、時間碼仍用逗號的 SRT，當成文字軌來畫。
實務後果很具體：
- 剪輯軟件裡「有字幕」≠ 官網播放器裡「有字幕」。
- 把
captions.srt改名captions.vtt不夠。缺檔頭、逗號未改，解析失敗。 - 網站軟字幕改錯字，只需替換
.vtt再清快取；燒錄則要重渲整條片。機構頁、課程頁日後要改校名、捐款戶口、法例年份時，軟字幕便宜得多。
因此工作流應分兩層：對白母帶繼續用 SRT 校對、給剪接師、給 YouTube；上自己網站的那一層，從已鎖母帶另轉一份 VTT。不要在 VTT 裡才開始改品牌名——那邊改完，Studio 那份又會分叉。
廣東話 WebVTT 只要改對三處，不要重打對白
把一份已校對的 UTF-8 SRT 變成網站可用的 VTT，核心只有三步。對白一個字都不必重聽，除非你發現母帶本身仍有錯。
一、第一行寫 WEBVTT，下一行留空。 SRT 沒有檔頭。WebVTT 檔案必須以這串字開頭，瀏覽器才承認它。可在檔頭同一行後面加可選說明文字，但最穩是單獨一行 WEBVTT，空一行，再進入第一條 cue。
二、時間碼毫秒分隔符：逗號改句點。 SRT 寫 00:01:14,500；VTT 寫 00:01:14.500。開始與結束兩端都要改，--> 兩邊的空白習慣可保留。漏改任何一條，常見後果是整軌不顯示，或該段之後全部對不齊。用編輯器「只在時間碼行替換」比全文替換逗號安全——對白裡的千位分隔（「1,200 元」）不該被改成句點。
三、序號可留可刪。 SRT 每段前面的 1、2、3 在 VTT 裡是可選的 cue 識別名，不是強制欄位。留下來通常無害，方便對回母帶行號；若你之後用手寫 line、position 設定，識別名與設定寫在同一條時間碼列，不要跟對白混在一起。
存檔副檔名用 .vtt，編碼繼續 UTF-8。廣東話亂碼多數是編碼而不是辨識，見 廣東話字幕亂碼。網站這條路上再多一個細節：有些伺服器或舊編輯器會寫入 UTF-8 BOM。若載入失敗而檔頭看起來又對，用十六進位或「顯示隱藏字元」檢查檔案最前面是否多了 EF BB BF；能去掉 BOM 就去掉，再讓伺服器以 text/vtt（或至少 text/plain; charset=utf-8）送出。
對白裡若出現 <、>、&（程式教學、電郵、網址說明），VTT 會把它們當標記。網站軌要把 < 寫成 <、& 寫成 &，否則後面半句消失或版面被扯歪。SRT 在多數剪輯軟件裡沒有這層解析，這是轉檔時獨有的一步，不要以為「Premiere 看過就等於網頁安全」。
註解用單獨的 NOTE 區塊，不要寫進會顯示的 cue。詞庫版本、校對人、對應的 SRT 檔名，放在 NOTE 裡方便網頁同事接手，觀眾看不到。
先鎖廣東話母帶，轉檔不要順便改語氣
網頁字幕一旦掛上去，學校、資助機構、上市公司都可能把那一行字當成對外陳述。轉 VTT 之前，母帶應已完成專有名詞、數字、近音那幾層，而不是「先上線再慢慢改」。校對優先序見 廣東話字幕校對。
網站場景還有三條母帶決策，跟 Vlog 娛樂片不同：
語體。 課程、政策解說、服務條款口播，觀眾會截圖。口語助詞整句上畫面，讀起來像聊天紀錄，也不利搜尋頁內文字（有些播放器會把 cue 暴露給輔助技術）。教學向內容多數應先做口語轉書面語，再轉 VTT。原則見 廣東話口語轉書面語。保留俚語的只適合明確標成「訪問原聲」的段落，不要一條機構片兩套標準。
中英夾雜。 官網、招生頁、產品頁出現 deadline、onboarding、藥名、條例簡稱時，硬譯成似是而非的中文，會跟頁面上已寫死的專名打架。網頁字幕與頁面正文必須同一套寫法。取捨見 中英夾雜字幕；系列片把校名、計劃名、產品名放進詞庫，見 字幕自定義詞庫。
聽障資訊。 <track> 的 kind 分成 subtitles（對白／翻譯）與 captions（對白加重要環境聲、講者）。機構、政府、學校教材若宣稱無障礙，母帶應按聽障友善來做聲音標註，而不是只把娛樂向 SRT 改個副檔名。內容層做法見 廣東話無障礙字幕。kind="captions" 改變的是瀏覽器怎麼分類這條軌，不會自動幫你補上 [門铃声]；標註要寫在 cue 文字裡。
轉檔本身很快。真正花時間的是上面這三層。VTT 只是載體。
HTML 怎麼掛軌：kind、語言標籤、label 各管一件事
母帶轉好之後，掛法大致如下（路徑按你站點改）：
<video controls crossorigin="anonymous">
<source src="/videos/briefing.mp4" type="video/mp4" />
<track
kind="captions"
srclang="zh-HK"
label="中文（香港）"
src="/captions/briefing.zh-HK.vtt"
default />
</video>
四個屬性不要混用：
kind。 對白加聲音標註、給聽不到或關聲的人用，用 captions。純對白翻譯、假設觀眾聽得到原聲，才用 subtitles。kind="subtitles" 時，規格要求必須有 srclang。同一個 <video> 不能有兩條 kind、srclang、label 全相同的軌。
label。 這是字幕選單上觀眾看見的字。寫「中文（香港）」或「廣東話字幕」，不要寫檔名 briefing-final-v3。選單看不懂，等於沒掛。
srclang。 必須是合法 BCP 47 標籤，給瀏覽器與輔助技術，不是給人讀的。香港繁體書面語軌，實務上常見 zh-HK：跟 YouTube 後台「中文（香港）」、Facebook 檔名 zh_HK 同一地區訊號，網頁同事最好對齊，避免三個平台三套代碼。BCP 47 裡粵語的首選主語言標籤是 yue（亦可寫較舊的 zh-yue），完整如 yue-Hant-HK 更精確，但許多現成播放器、分析工具、翻譯開關只認得 zh-*。對外機構站、要給最多瀏覽器選單認到「中文」時，用 zh-HK 並把 label 寫清楚；學術或語言學習站若要明示這是粵語而不是普通話，可另掛 yue-Hant-HK，兩條軌的 label 必須不同。 不要用 zh-CN 去掛繁體香港書面語。
default。 每隻影片最多一條。香港本地頁、對白就是給香港觀眾看的，可以把這條設為預設，關聲自動出現。英文翻譯軌不要搶 default，除非頁面本身是英文站。
YouTube 的語言下拉、Facebook 的 .zh_HK.srt 檔名，都不會自動套到你官網。網站這層要你自己寫在 HTML。語言代碼寫錯，後果不是亂碼，而是選單出現「Chinese」卻跟頁面其他語言切換邏輯對不上，或輔助技術報成普通話。
同源、跨域與檔案送不出來
<track src> 預設必須與該 HTML 文件同源。影片在 www.example.edu.hk，字幕卻放在 cdn.example.edu.hk 或另一個物件儲存桶，沒設 CORS 時，軌會靜默失敗：播放器有畫面、沒字幕、控制台才看得到跨源錯誤。
修法是兩端一起做，只改一邊不夠：
- 在
<video>（或<audio>）加上crossorigin="anonymous"（或你實際在用的 CORS 模式）。MDN 寫的是：除非父層媒體元素有crossorigin，否則 track 的 URL 必須同源。 - 字幕所在的主機回應
Access-Control-Allow-Origin（以及快取時需要的Access-Control-Allow-Methods等），允許該網頁來源讀取.vtt。 - 回應標頭盡量帶正確的媒體類型
text/vtt; charset=utf-8。靜態主機若把.vtt當下載檔或application/octet-stream，個別瀏覽器會表現不一致。
本地用 file:// 打開 HTML 來預覽，常常載不到 track。用本機靜態伺服器（任何能送靜態檔的都行）再測。測的時候打開字幕選單，不要只看「影片能播」——能播只證明 MP4 路徑對。
快取也會整人。你改了 VTT 裡一個校名，CDN 仍送舊檔，等於沒改。發布後用帶版本的檔名（briefing.zh-HK.20261014.vtt）或查詢字串，比拜託所有人強制重新整理可靠。
畫面上的位置：網頁有自己的按鈕區
剪輯時間軸可以把字幕放在安全區正中；官網播放器底下還有進度條、自訂的「立即報名」浮層、手機底部瀏覽器工具列。VTT 允許在時間碼同一行加 cue 設定，例如 line:80%、align:center、position:50%，避免字疊在控制列。不要把這層樣式做回 SRT 母帶——YouTube 與 Premiere 會忽略或當成怪字。
CSS 可以用 video::cue 調字級、背景。機構站應優先保證對比與可讀，而不是品牌漸層。字級過大，一行廣東話書面語會被裁切；過小數，手機關聲完全讀不到。改 CSS 後用真機看一次全螢幕與直向，不要只看桌面編輯器。
仍有一批情況，網站軟字幕幫不了忙：
- 把 MP4 下載後用系統播放器開，多數人不會同時下載
.vtt。 - 社群預覽圖、即時通訊傳連結的內嵌播放器，常常不讀你站上的
<track>。 - 簡報投影、展覽循環播放，現場電腦沒有瀏覽器字幕選單。
這些出口要另做燒錄版，對白仍須與 VTT 同一母帶。平台分叉見 軟字幕與燒錄字幕。網頁主線用 VTT，下載檔、社交預覽、展場片用燒錄——兩條路徑，一份對白。
何時值得為網站另出 VTT
不是每條廣東話片都要掛網頁軌。可以這樣判斷：
- 課程頁、政策解說、服務介紹、可搜尋的長說明： 值得。改一句免重渲，輔助技術也有機會讀到文字軌。
- 只在 YouTube 存在、官網只嵌 YouTube iframe： 不要做一套平行 VTT。字幕應上 Studio，見 YouTube 廣東話字幕。iframe 裡的軌由 YouTube 管，你站上的
.vtt干預不了。 - 十秒 Loop、全畫面已燒好字的主視覺： 再掛一條重複的軟字幕，關聲會疊字。要嘛燒錄、要嘛軟字幕，選一個。
- 音訊 Podcast 頁用
<audio>： 一樣可以掛 track，當逐字稿時間軸。長音檔仍應先切可讀 cue，見 Podcast 廣東話字幕。
生成端繼續用粵語流程出 SRT：上載、校對書面語、匯出，步驟見 廣東話字幕生成器。CantoSub AI 匯出 .srt、.fcpxml、.txt，並不代替瀏覽器要的 VTT；網站那一步是轉檔與掛軌，不是再跑一次語音辨識。功能與配額見 Model 2.0、價格，註冊：https://app.cantosubai.com/signup。
常見問題
問：把 SRT 改名成 VTT 為什麼還是沒有字幕？
答：檔案仍缺 WEBVTT 檔頭，時間碼多半還用逗號。瀏覽器不把它當文字軌。先轉檔，再檢查 src 路徑、同源／CORS，以及字幕選單有沒有出現你寫的 label。
問：語言標籤該寫 zh-HK 還是 yue？
答：觀眾看的是 label。srclang 給機器。要跟 YouTube「中文（香港）」、多數網頁語言開關對齊，用 zh-HK。要明示粵語、且你的播放器認 yue，可用 yue-Hant-HK，但不要跟另一條 zh-HK 用同一個 label。正文是繁體香港書面語就不要標 zh-CN。
問：官網已經嵌 YouTube，還要不要自己做 VTT？
答：不要平行做兩套，除非你同時用 HTML5 自建播放器播同一條 MP4。iframe 只走 Studio 那條軌。自建 <video> 才需要站內 .vtt。
問：VTT 可以保留 SRT 的粗體標記嗎？
答：不要把 SRT 常見的裸 <b> 習慣整份貼過來再祈禱。WebVTT 允許有限的 cue 內標記，但錯誤或未跳脫的括號會吃掉後文。母帶以純文字為準，樣式交給 ::cue 或播放器主題。
問：改完 VTT，手機瀏覽器仍看不到？
答：先排除 file:// 預覽、錯誤 MIME、跨域、快取舊檔、沒設 default 又沒人手動開選單。再查 cue 是否被底部控制列蓋住。真機關聲播一遍，比只看桌面開發者工具準。
本文由 CantoSub 團隊編寫／審閱；撰稿過程使用 AI 輔助，事實與產品說明以官網為準。WebVTT 與 <track> 行為以 MDN：<track> 及 MDN：WebVTT API 為準。