Track 标签通过 src 引用 UTF-8 无 BOM 的 WebVTT 文件，配合 kind、srclang、label 等属性实现多语言字幕声明与切换，浏览器依 srclang 匹配系统语言并支持用户手动控制。

Track 标签是 HTML5 为视频和音频元素提供原生字幕、章节、描述等文本轨道支持的核心标签，它本身不直接包含字幕内容，而是通过 src 属性引用外部 WebVTT（.vtt）文件，配合 kind、srclang、label 等属性实现多语言字幕的声明与切换。

准备符合规范的 WebVTT 字幕文件

每个语言需对应一个独立的 .vtt 文件，必须以 UTF-8 编码保存，并以标准 WebVTT 头部开头：

• 首行必须为 WEBVTT（不区分大小写，前后不能有空格或 BOM）
• 每段字幕用数字序号 + 时间轴 + 内容表示，时间格式为 HH:MM:SS.mmm --> HH:MM:SS.mmm
• 中文、日文、阿拉伯文等需确保文件无 BOM，否则浏览器可能解析失败
• 示例（zh.vtt）：
  WEBVTT
  
  1
  00:00:01.000 --> 00:00:04.000
  你好，欢迎观看本视频。

在 video/audio 标签中正确声明多个 track

每个 track 元素代表一种语言轨道，关键属性不可遗漏：

• kind="subtitles"：明确类型（非 captions，因 subtitles 支持 srclang 和用户可选）
• srclang：使用 ISO 639-1 语言代码（如 zh、en、ja、es），这是浏览器识别语言并匹配系统设置的基础
• label：显示在字幕菜单中的友好名称（如 中文（简体）、English），建议含括号注明变体
• default（可选）：仅设一个，表示页面加载时默认启用的轨道；未设则默认关闭

示例代码：

立即学习“前端免费学习笔记（深入）”；

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" srclang="zh" label="中文（简体）" src="zh.vtt" default>
  <track kind="subtitles" srclang="en" label="English" src="en.vtt">
  <track kind="subtitles" srclang="ja" label="日本語" src="ja.vtt">
</video>

浏览器行为与用户控制逻辑

现代浏览器（Chrome、Edge、Firefox、Safari）均支持原生字幕菜单，但表现略有差异：

• 用户可通过右键视频 →「字幕」或控件栏「cc」按钮打开语言列表，手动切换
• 部分浏览器（如 Chrome）会根据操作系统语言自动优先启用匹配的 srclang 轨道（若该 track 存在且未被禁用）
• default 属性仅影响首次加载，用户手动切换后即以用户选择为准，不会因刷新重置为 default
• JavaScript 可通过 video.textTracks 获取所有轨道，用 track.mode = 'showing' 或 'disabled' 动态控制，但需注意跨域限制（src 必须同源或配置 CORS）

常见问题与注意事项

实际嵌入中容易忽略的关键点：

• CORS 问题：若 .vtt 文件与页面不同源，需服务端返回 Access-Control-Allow-Origin: *，否则 Firefox/Edge 可能静默失败
• 路径错误：src 使用相对路径时，以 HTML 文件所在位置为基准，而非 JS 或 CSS 所在目录
• 编码错误：Windows 记事本保存的 .vtt 默认为 ANSI 或 UTF-8 with BOM，务必用 VS Code、Sublime 等工具另存为「UTF-8 无 BOM」
• srclang 值无效：如写成 zh-CN 虽常见，但规范推荐用 zh；浏览器对子标签（如 -CN）兼容性不一，建议主语言码优先