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（可选）：仅设一个，表示页面加载时默认启用的轨道；未设则默认关闭
示例代码：
浏览器行为与用户控制逻辑
现代浏览器（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）兼容性不一，建议主语言码优先
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
