HTML5 Video内嵌WebVTT字幕无法显示问题求助

问题场景 #

• 需求：视频播放时默认显示字幕
• 异常情况：视频在各浏览器均可正常播放，但Firefox中控制栏CC按钮显示已选中英文字幕，字幕却始终不出现；更换MDN官方示例VTT文件后问题依旧

精简后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic HTML5 Page</title>
</head>
<body>
  <video controls src="video/content/video.mp4">
    <track default kind="captions" srclang="en" label="English" src="video/content/friday.vtt" />
  </video>
</body>
</html>

使用的MDN示例VTT文件内容 #

WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels

排查与解决步骤 #

1. 配置VTT文件MIME类型
   服务器必须为.vtt文件返回正确的MIME类型text/vtt，否则浏览器无法识别。

   • Nginx配置示例：

     location ~* \.vtt$ {
         types { text/vtt vtt; }
     }
     

   • Apache配置示例（.htaccess文件）：

     AddType text/vtt .vtt
     

2. 验证字幕文件路径
   在浏览器地址栏直接输入VTT文件的完整URL，确认能正常加载。如果返回404，说明路径错误，需调整track标签的src属性。

3. 调整track标签属性
   尝试将kind="captions"替换为kind="subtitles"，部分浏览器对这两个属性的解析逻辑有差异，替换后可能正常显示。

4. 检查VTT文件格式

   • 确保文件开头是大写的WEBVTT，且后续有空白行分隔内容
   • 时间戳严格遵循HH:MM:SS.mmm格式，避免使用中文符号或全角字符
   • 确认文件编码为UTF-8，防止乱码导致解析失败

5. 清除浏览器缓存
   按Ctrl+F5强制刷新页面，或清除浏览器缓存后重新测试，避免旧缓存文件干扰。

6. Firefox特定设置检查
   打开about:config，搜索以下配置项并确保值为true：

   • media.vtt.enabled
   • media.caption-baseline.enabled

内容的提问来源于stack exchange，提问作者grovberg