HTML5视频字幕需track标签与WebVTT文件严格协同：首行顶格大写WEBVTT、时间戳毫秒三位且箭头两侧各一空格、UTF-8无BOM编码、track必须为video直接子元素且位于source之后、kind/srclang/label/src四属性缺一不可、服务端须返回text/vtt MIME类型。
track 标签能加字幕，但不是写上就显示——浏览器对格式、位置、属性、编码四方面零容忍，任一环节出错，字幕菜单里直接消失，连报错都可能不给。
WebVTT 文件必须严格合规，否则静默失败
浏览器解析 .vtt 文件时不做容错：
- 首行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT（webvtt 或 WebVTT 全部无效）
- 时间戳格式必须为 00:00:01.234 --> 00:00:04.567：小时/分钟/秒两位，毫秒三位，箭头两侧各两个空格
- 文件编码必须是 UTF-8 无 BOM：Windows 记事本默认带 BOM，务必用 VS Code 或 Notepad++ 保存为“UTF-8 without BOM”
- 中文等非 ASCII 字符要能正常显示，建议用在线工具（如 webvtt.org/validator）验证文件是否“干净”
track 必须嵌在 video 内且位置固定
track 不是随便放的标签，它只在特定位置生效：
- 必须是 video 的**直接子元素**（不能套在 div 或注释里）
- 必须位于所有 source 标签**之后**、 **之前**
- 错误示例：track 写在 source 前面、写在 video 外、中间插了空行或注释——全部被浏览器静默忽略
- 正确结构示例：
<video controls><source src="promo.mp4" type="video/mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文(简体)" default><track kind="subtitles" src="en.vtt" srclang="en" label="English"></track></track></source></video>
四个属性缺一不可，浏览器不推断任何默认值
kind、src、srclang、label 必须全部显式写出：
- kind="subtitles" 是唯一触发字幕 UI 的取值（caption 或 subtitle 无效）
- src 必须指向可访问路径；若跨域，服务端需返回 Access-Control-Allow-Origin: *
- srclang 必须是标准 BCP 47 码（如 zh-Hans、en-US），写 chinese 或 zh-cn 不识别
- label 是用户在右键菜单或控件栏看到的名称，为空时可能显示 (no label)
- default 属性仅表示“默认启用”，但用户仍需手动点击字幕按钮才能开启——它不等于“自动显示”
服务器 MIME 类型和 CORS 容易被忽略
即使 HTML 和 .vtt 全对，字幕也可能加载失败：
- 服务器必须将 .vtt 文件响应为 Content-Type: text/vtt；Nginx/Apache 需显式配置，否则 Chrome/Firefox 拒绝解析
- 若视频与字幕不同源（比如字幕放在 CDN），服务端必须返回 Access-Control-Allow-Origin，否则控制台只报 Failed to load resource，无具体原因
- 开发阶段可用本地服务（如 python3 -m http.server）绕过 file:// 协议限制，避免因协议导致跨域拦截
真正卡住人的从来不是“怎么加”，而是“为什么没反应”——问题往往藏在首行大小写、BOM、source 顺序、srclang 写法或服务器配置里。调试时优先打开开发者工具的 Network 面板，看 .vtt 请求是否 200、Content-Type 是否正确、Response 是否可读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
