影片播得動卻沒有字幕時,先判斷播放器有沒有載入字幕檔,再查當下是不是位於顯示區間。
把字幕接到播放器
將影片和 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 秒這句應已消失。直接開啟字幕網址,確認拿到的是 WEBVTT 而不是狀態碼 200 的登入頁。檢查 text/vtt;若跨網域,另查 crossorigin 和伺服器的 CORS 回應。
常見問題解答
為什麼只在剪接點之後不同步?
將發佈版與轉錄時使用的版本對照,檢查剪接點前後。前段若已同步,不要整軌位移。


