track标签必须位于video内部且在source之后,SRT文件需符合格式规范、UTF-8无BOM编码并支持CORS,kind、srclang、label属性缺一不可,推荐转为WebVTT提升兼容性。

track 标签必须放在 video 内部且在 source 之后
很多初学者把 放在 外面,或者写在 前面,结果字幕完全不显示。浏览器只认「 元素内部、 标签闭合之后」的 。
正确顺序是: → (可多个)→ →
SRT 文件必须符合规范,且服务器要支持 CORS
浏览器对
常见问题包括:
立即学习“前端免费学习笔记(深入)”;
- 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)”。
错误示例: —— 缺 srclang,字幕菜单里不会出现。
Chrome 和 Firefox 对 SRT 解析行为不一致
Firefox 原生支持 SRT,Chrome 实际上是把 SRT 转成 WebVTT 再解析,所以某些边缘格式(比如时间戳末尾多空格、注释行以 NOTE 开头)在 Chrome 里会失败,Firefox 却能显示。
稳妥做法:
SRT 看似简单,但真正跑通需要同时满足 HTML 结构、文件格式、HTTP 响应、浏览器兼容四重条件,漏掉任何一环都只是“看起来写了字幕”。











