track标签需严格遵循结构、属性、格式与服务端配置四重规范：必须紧贴source后作为video直接子元素；kind、srclang、label缺一不可；webvtt文件首行webvtt全大写无bom，utf-8编码，时间戳毫秒三位，服务器返回text/vtt mime类型；src路径须同源且经本地服务访问。
track 标签本身不“添加字幕”，它只是向 video 元素声明一条外部 WebVTT 字幕轨道；只要漏掉结构、属性、文件格式、服务端响应中任意一环，字幕就会静默失效——控制台可能无报错，播放器菜单里却空空如也。
track 必须紧贴 source 之后且是 video 的直接子元素
浏览器只在video 开始标签内、所有 source 闭合之后、track。放错位置等于没写，且几乎不报错。
- ❌ 错误：把
track放在source前面、写在外面、包在div或注释里 - ❌ 错误：在
source和track之间插入空行或 HTML 注释（部分浏览器会中断解析） - ✅ 正确顺序示例：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default></track></source></video>
kind、srclang、label 这三个属性一个都不能少
它们不是“可选增强”，而是浏览器注册和渲染轨道的硬性条件。缺一个，video.textTracks.length 可能就为 0。
-
kind="subtitles"：必须写全，不能是"subtitle"或留空；其他值如"captions"有不同语义，不推荐初用 -
srclang：必须是合法 BCP 47 语言码，如"zh"、"en-US"、"ja"；写成"ch"、"cn"、"english"会被忽略 -
label：用户在右键菜单或控件栏看到的名字；为空时可能显示"(no label)"，多语种下无法区分 -
default：最多只能在一个track上出现；多个会导致全部失效
WebVTT 文件必须满足四项硬规范
哪怕一个空格出错，整条轨道都会被丢弃——不是“显示异常”，而是彻底不加载。- 首行必须是
WEBVTT（全大写、顶格、前后无空格、无 UTF-8 BOM） - 编码必须为 UTF-8 无 BOM（VS Code 保存时选 “UTF-8”，不是 “UTF-8 with BOM”）
- 时间戳格式严格为
00:00:01.234 --> 00:00:04.567（毫秒必须三位，箭头前后各一个空格） - 服务器必须返回
Content-Type: text/vtt；Nginx 需配置types { text/vtt vtt; }，否则 Safari/Chrome 静默拒绝
src 路径和服务端响应必须匹配
track 的 src 是一次独立 HTTP 请求，受同源策略、协议、MIME 类型三重限制。
- 本地开发时，
file://协议下必然失败（Chrome/Firefox 明确禁用），必须起服务：python3 -m http.server或 VS Code Live Server - 路径是相对于当前 HTML 页面 URL 的，不是文件系统路径；例如 HTML 在
/pages/video.html，vtt 在/assets/subs/zh.vtt，则src应为"/assets/subs/zh.vtt" - 若视频页是 HTTPS，
src也必须是 HTTPS；跨子域需后端配Access-Control-Allow-Origin - 路径区分大小写：
zh.vtt≠ZH.VTT（尤其 Linux 服务器）
真正容易被忽略的是：WebVTT 不是“内容对就行”的格式，它是浏览器解析器级的协议——首行、BOM、毫秒位、空格、换行符，全都卡得死死的。 SRT 文件哪怕内容一样，也不能靠改后缀解决；必须用 ffmpeg -i input.srt output.vtt 或专业转换工具重生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
