srclang必须使用bcp 47标准语言标签(如zh-hans、en),不可用自然语言名(如chinese);同一video中多个subtitles轨道srclang须唯一,漏写或写错将导致字幕静默失效且无报错。

srclang必须是BCP 47语言标签,不是自然语言名
浏览器靠srclang做自动匹配和菜单筛选,它不认“Chinese”“English”这种词,只认标准化语言代码。写错就等于没写——字幕条目根本不会出现在播放器的字幕菜单里,控制台也无报错,纯静默失效。
-
srclang="zh"✅ 简体中文通用标识(推荐用于无变体区分场景) -
srclang="zh-Hans"✅ 明确简体中文,比zh-CN更符合Web标准(BCP 47优先用Hans/Hant而非CN/TW) -
srclang="zh-Hant"✅ 繁体中文,适用于港台内容 -
srclang="en"✅ 英文,不是eng或English -
srclang="ja"✅ 日文;ko韩文;es西班牙文;均用ISO 639-1双字母码 -
srclang="Chinese"❌ 浏览器完全忽略 -
srclang="zh-CN"⚠️ 能工作,但非首选;部分旧版Safari对区域子标签支持不稳定
同一video里多个track的srclang不能重复
哪怕你有两份简体中文字幕(比如人工校对版 vs AI生成版),也不能都设srclang="zh-Hans"。浏览器认为这是同一语言轨道,只会显示其中一个(通常是第一个),另一个被丢弃。
- 解决办法:用不同
label区分用途,但srclang仍需唯一——比如一份用srclang="zh-Hans",另一份改用srclang="zh-Hans-alt"(BCP 47允许扩展,但需确保播放器兼容) - 更稳妥做法:只保留一份高质量字幕,避免用户困惑
- 如果真要并存多版本,建议用JS动态切换src,而不是声明多个
track
srclang对kind="subtitles"是强制字段
漏写srclang会导致该track在字幕菜单中消失,即使kind和src都正确。这不是可选项,是规范硬性要求。
- 错误写法:
<track kind="subtitles" src="zh.vtt" label="中文"></track>→ 字幕菜单里看不到“中文”项 - 正确写法:
<track kind="subtitles" src="zh.vtt" srclang="zh-Hans" label="中文(简体)"></track> -
kind="chapters"或kind="descriptions"可省略srclang,但subtitles和captions必须带 - 注意大小写:全部小写,中间用连字符,不能有空格或下划线
浏览器对srclang的支持有差异,别全信文档
Chrome、Edge、Firefox主流支持没问题,但iOS Safari和部分安卓WebView对扩展语言标签(如zh-Hans-CN)解析较弱,容易 fallback 到und(未知语言)。
- 上线前务必在真机测试:打开视频 → 右键/长按调出字幕菜单 → 看语言名是否出现、能否点击切换
- 若发现某语言始终不显示,先检查
srclang拼写,再查对应.vtt文件是否返回Content-Type: text/vtt - 本地开发时用
python3 -m http.server起服务,别直接双击HTML——file://协议下srclang可能被忽略
srclang写得再漂亮,只要没进字幕菜单,就等于没配。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











