如何為 HTML5 網頁影片加入 VTT 字幕軌

影片有畫面但沒有字幕時，應先查字幕檔能否載入，再查測試的播放位置是否有字幕。

連接影片與字幕檔

影片與 UTF-8 VTT 最好先放在同一網站，然後在 video 內加入 track。相對路徑以網頁位置為準。srclang 代表字幕文字的語言，而非必然等同對白；不同語言應分開命名。

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

下載示範影片和 VTT，在測試伺服器上與 HTML 頁面放在同一個資料夾。要使用示例程式碼，請命名為 lesson.mp4 和 example-en.vtt。透過網址開啟網頁，以免瀏覽器對本機檔案的存取限制造成誤判。

示例只收錄工作坊通告，影片開頭沒有字幕是正常的。暫停在第 8 秒，比對畫面上的英文，再跳到第 13 秒確認文字已消失。如果關閉字幕後仍有文字，檢查其他字幕軌或已燒錄在畫面上的字幕。

開啟開發者工具的「網絡」頁籤，重新載入並選擇英文。沒有 .vtt 請求時，檢查正式網頁的 video 元素，編輯器可能在儲存時移除了 track。若有請求，請比對完整網址與實際上傳目錄，留意課程子目錄中的相對路徑。

檢查回應內容，開頭應有 WEBVTT、空白行和時間碼。狀態碼是 200 也可能拿到登入頁面的 HTML。遇到 CORS 錯誤，先從網頁的同一來源提供檔案測試，再核對媒體伺服器允許的來源與 video 的 crossorigin 設定。

找出三句容易聽辨的對白，比對開口時間與字幕起點。偏移量相同時先查片頭；只有第三句晚出現，就查看第二句和第三句之間的剪輯。偏差逐步擴大時，先確認播放器實際載入的是哪一版影片。

在正式網頁切換每種語言，核對一句對白後關閉字幕。若還有文字，請與原始畫面比對。回報時提供影片檔案名稱、選取的字幕軌及出錯的播放時間，讓同事能重現問題。

示例採用 EasySub 自編稿件的英語合成語音，將原始 SRT 第 3 段改寫為 VTT 示範。並非本次實際匯出結果，亦非專業人工校對稿。

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

在範例選 English 並跳至第 8 秒，應見到例句；到第 13 秒該句應已消失。直接開啟字幕網址，確認不是返回 200 的登入頁。檢查 text/vtt；若用不同網域，還要核對 crossorigin 及伺服器的 CORS 回應。

對照已發佈版本與轉錄所用版本，逐一檢查剪接位前後。前段準確時，不要把整條字幕軌一併移動。