track标签必须位于video内部且在source之后，SRT文件需符合格式规范、UTF-8无BOM编码并支持CORS，kind、srclang、label属性缺一不可，推荐转为WebVTT提升兼容性。
track 标签必须放在 video 内部且在 source 之后
很多初学者把 <track> 放在 <video> 外面，或者写在 <source> 前面，结果字幕完全不显示。浏览器只认「<video> 元素内部、<source> 标签闭合之后」的 <track>。
正确顺序是：<video> → <source>（可多个）→ <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"> —— 缺 srclang，字幕菜单里不会出现。
Chrome 和 Firefox 对 SRT 解析行为不一致
Firefox 原生支持 SRT，Chrome 实际上是把 SRT 转成 WebVTT 再解析，所以某些边缘格式（比如时间戳末尾多空格、注释行以 NOTE 开头）在 Chrome 里会失败，Firefox 却能显示。
稳妥做法：
- 用在线工具（如 srt2vtt）把 SRT 转成 WebVTT，再改
src后缀和type属性 - 或直接改用 WebVTT 格式（首行必须是
WEBVTT，时间戳用00:01:23.456，句点分隔毫秒） - 不要依赖
default属性在所有浏览器中自动开启——用户仍需手动点击字幕按钮
