srclang属性必须为合法BCP 47语言码(如zh、en-US),否则浏览器静默忽略track标签,字幕菜单中不显示;常见错误包括ch、Chinese、ZH等非标准写法,且需配合kind="subtitles"、WebVTT格式文件及正确HTML嵌套结构方可生效。

srclang属性必须写对,否则字幕菜单里根本看不到
浏览器只在 kind="subtitles" 时强制校验 srclang,写错或漏掉,整个 <track> 就被静默忽略——控制台不报错,播放器字幕开关里也没有这条轨道。
常见错误包括:srclang="ch"、srclang="cn"、srclang="Chinese",这些都不是合法 BCP 47 语言标签,浏览器直接跳过。
-
srclang必须是双字母小写语言码,比如zh(中文)、en(英文)、ja(日文) - 地域变体可加短横线,如
zh-CN、en-US,但多数浏览器只认前两字符,zh-CN和zh效果一致 - 不能用下划线(
zh_CN)、大写(ZH)、全称(Chinese)或非标准缩写(ch) - 如果视频含繁体字幕,建议用
zh-TW或zh-Hant,避免和简体混用导致读屏发音错乱
srclang和html lang要区分清楚,别混用
srclang 是描述字幕文件本身的语言,<html lang="zh-CN"> 是声明整页文档语言,二者作用域完全不同,不能互相替代。
比如一个英文视频配中文字幕:<html lang="en"> 是合理的(页面主体是英文),但字幕 <track srclang="zh"> 也必须写,否则字幕菜单不显示“中文”选项。
立即学习“前端免费学习笔记(深入)”;
- 页面
<html lang="zh-CN">+ 字幕srclang="en":正常,表示页面是中文,但这条字幕是英文的 - 页面
<html lang="zh-CN">+ 字幕srclang="zh":也正常,但要注意避免屏幕阅读器把中文字幕块误读为“页面正文”而重复朗读 - 千万别写
srclang="zh-CN"然后指望它自动匹配<html lang="zh-CN">—— 浏览器不干这事,它只按srclang值列菜单项
Firefox 和 Safari 对 srclang 的支持有坑
srclang 在 Chrome、Edge、Opera 上基本稳定,但在 Firefox 和 Safari 上存在兼容性问题:Firefox 会识别 srclang 并显示菜单项,但点击后可能不加载字幕;Safari 则要求 srclang 必须和系统语言匹配才默认启用(比如系统设为“简体中文”,srclang="zh" 才可能自动弹出)。
- Firefox 90+ 支持
srclang,但若 WebVTT 文件首行不是WEBVTT或含 BOM,即使srclang正确也会静默失败 - Safari 需要服务端返回
Content-Type: text/vtt,仅靠srclang不足以触发字幕渲染 - 测试时务必用真实服务器(如
http://localhost),file://协议下所有主流浏览器都会禁用<track>加载
srclang 写对了但字幕还是不显示?查这三个硬条件
很多开发者卡在“srclang 没问题,但字幕就是不出来”,其实真正拦路虎往往不在这里。以下三项缺一不可:
-
kind必须是subtitles(不是captions、descriptions或漏写) - 字幕文件必须是 WebVTT 格式(.vtt),SRT 文件哪怕内容一样,也会被静默拒绝
-
<track>标签必须作为<video>的直接子元素,且严格放在所有<source>之后、</video>之前
最容易被忽略的是路径问题:src 指向的 .vtt 文件必须能被浏览器直接 GET 到,且响应头含 Content-Type: text/vtt。本地开发时用 Live Server 启服务,别双击 HTML 文件打开。



















