Track标签声明字幕轨道而非直接添加字幕，需配合符合规范的WebVTT格式文件、正确HTML结构及浏览器支持才能显示。
Track 标签本身不直接“添加字幕”，而是为 <video></video> 元素声明一条外部字幕轨道，实际显示依赖浏览器对 WebVTT 格式的支持和用户启用状态。
准备符合规范的字幕文件
字幕必须是纯文本的 WebVTT（.vtt）格式，不能是 SRT 或其他格式（即使内容相似，也需转换）。文件需满足：
- 首行必须是
WEBVTT（大小写敏感，前后无空格） - 每段字幕以序号开头，后接时间轴（格式：
00:00:01.000 --> 00:00:04.500），再换行写文字 - 文件编码为 UTF-8，且建议保存时不含 BOM
- 示例片段：
WEBVTT 1 00:00:01.000 --> 00:00:04.500 欢迎观看本视频。 2 00:00:05.200 --> 00:00:08.700 这是第二句字幕。
在 video 标签中正确使用 track 元素
<track></track> 必须作为 <video></video> 的子元素，放在 <source></source> 之后、 之前。关键属性包括：
- kind="subtitles"：明确类型（不可省略；其他可选值如 captions、descriptions 等用途不同）
- src：指向 .vtt 文件的相对或绝对路径（需确保服务器能正常返回该文件，HTTP 状态码为 200）
-
srclang：标明语言代码（如
zh、en），对多语言切换和屏幕阅读器很重要 - label：用户界面中显示的名称（如“中文（简体）”），建议填写
-
default（可选）：设为
default可让该轨道默认启用（但仅当用户未手动关闭字幕时生效）
示例代码：
立即学习“前端免费学习笔记（深入）”；
<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default> <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English"> </video>
验证与常见问题排查
即使代码写对，字幕也可能不显示，需检查以下几点：
- 浏览器是否支持 WebVTT：Chrome、Firefox、Edge、Safari（10.1+）均支持，旧版 Safari 需注意
- .vtt 文件能否通过浏览器地址栏直接访问（排除 404 或 MIME 类型错误）；服务器应返回
text/vtt类型，否则部分浏览器会拒绝加载 - 视频播放控件中是否已点击“字幕”按钮并选择了对应轨道（默认可能为“关闭”）
- 检查开发者工具的 Console 和 Network 面板：是否有 “Failed to load resource” 或 “Cross-origin request blocked” 报错
- 确保字幕时间轴与视频实际时间匹配（时间偏移会导致字幕错位）
进阶：动态控制字幕轨道
可通过 JavaScript 操作 video.textTracks 实现运行时切换：
-
video.textTracks[0].mode = "showing"启用第 1 条轨道 -
video.textTracks[0].mode = "disabled"关闭它 -
video.textTracks[0].mode = "hidden"隐藏但保持解析（用于脚本读取） - 监听
texttrackschange事件可响应用户手动切换行为
注意：textTracks 是实时集合，新增/删除 track 会自动更新，无需重新获取引用。
