track标签必须位于video内部且在source之后，srt文件需符合格式规范、utf-8无bom编码并支持cors，kind、srclang、label属性缺一不可，推荐转为webvtt提升兼容性。
track 标签必须放在 video 内部且在 source 之后
很多初学者把 <track></track> 放在 <video></video> 外面，或者写在 <source></source> 前面，结果字幕完全不显示。浏览器只认「<video></video> 元素内部、<source></source> 标签闭合之后」的 <track></track>。
正确顺序是：<video></video> → <source></source>（可多个）→ <track></track> →
</video></p> <pre class="brush:php;toolbar:false;"><video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" label="中文" srclang="zh" src="subtitle.zh.srt" default> </video>
SRT 文件必须符合规范，且服务器要支持 CORS
浏览器对 <track> 加载的 SRT 文件非常敏感：时间戳格式错一位、空行多一个、编码不是 UTF-8，都会静默失败——控制台可能只报 <code>Failed to load resource，不提示具体原因。
常见问题包括：
立即学习“前端免费学习笔记（深入）”；
- SRT 时间戳用逗号分隔毫秒（
00:01:23,456），不能用句点 - 序号后必须换行，时间行后必须换行，字幕正文后必须空一行
- 文件需保存为 UTF-8 无 BOM 编码（用 VS Code 或 Notepad++ 确认）
- 如果视频和 SRT 不在同一域名下，服务器必须返回
Access-Control-Allow-Origin头
kind、srclang、label 这三个属性缺一不可
kind="subtitles" 是唯一能触发字幕 UI 的取值（captions 用于带声音描述的字幕，descriptions 等不显示在画面上）；srclang 必须是合法的 BCP 47 语言标签（如 zh、en-US），否则设置 default 也不会自动启用；label 是用户在右键菜单里看到的名字，为空时浏览器可能显示 “(no label)”。
错误示例：<track kind="subtitles" src="xx.srt"></track> —— 缺 srclang，字幕菜单里不会出现。
Chrome 和 Firefox 对 SRT 解析行为不一致
Firefox 原生支持 SRT，Chrome 实际上是把 SRT 转成 WebVTT 再解析，所以某些边缘格式（比如时间戳末尾多空格、注释行以 NOTE 开头）在 Chrome 里会失败，Firefox 却能显示。
稳妥做法：
SRT 看似简单，但真正跑通需要同时满足 HTML 结构、文件格式、HTTP 响应、浏览器兼容四重条件，漏掉任何一环都只是“看起来写了字幕”。
