srclang必须使用小写、无下划线、符合BCP 47标准的语言标签(如"zh"、"zh-Hans"),否则浏览器直接忽略track元素,不注册进video.textTracks列表。

srclang写成"ch"或"zh_CN"为什么字幕不显示
浏览器只认标准BCP 47语言标签,srclang="ch"、srclang="zh_CN"、srclang="Chinese"全都不合法,轨道直接被忽略——不是隐藏,是压根没注册进video.textTracks列表。
-
srclang必须是小写、无下划线、无空格的短码,如"zh"、"en"、"ja" - 地区变体用连字符,不是下划线:
"zh-Hans"(简体中文)✅,"zh_Hans"❌ - 避免冗余:不需要写
"zh-CN",除非你真要区分大陆简体和台湾繁体;多数场景"zh"足够 - JS切换时靠
srclang匹配,写错就找不到轨道:track.srclang === "zh"永远为false
srclang为空或拼错导致控制台静默失败
写srclang=""、srclang="subtitle"或漏掉该属性,浏览器不会报错,但<track>整条被跳过解析——Network里看不到.vtt请求,video.textTracks.length比预期少1。
- 检查DOM:右键审查元素,确认
<track>标签里确实存在srclang且值非空 - 验证是否生效:在控制台执行
Array.from(video.textTracks).map(t => [t.kind, t.srclang, t.mode]),看输出里有没有你的srclang值 - 常见拼写错误:
"zho"(ISO 639-2)、"chi"(旧码)、"zh-cn"(小写连字符可接受,但"zh-CN"更规范)
多语言切换时srclang大小写敏感问题
srclang严格区分大小写,srclang="ZH"和srclang="zh"被视为两个不同语言,JS遍历时无法匹配。
- 全部统一用小写:服务端生成、手动编辑、脚本生成都强制转小写
- 用户偏好检测时别直接比对:
navigator.language.toLowerCase().startsWith("zh")比=== "zh"更鲁棒 - Safari尤其挑剔,
srclang="en-us"可能被当作无效值,建议统一用"en-US"格式(首字母大写,地区码大写)
srclang与label不一致引发的UI混淆
label只是菜单显示文字,srclang才是功能标识。两者不一致不会导致加载失败,但会让用户困惑——比如srclang="en"却label="中文",用户点“中文”实际切到英文轨。
立即学习“前端免费学习笔记(深入)”;
- label应准确反映语言内容,且唯一:避免两个
label="中文字幕",否则下拉菜单里分不清哪个是简体哪个是繁体 - srclang必须真实对应字幕内容语言,否则自动匹配逻辑失效(如用
srclang="en"标中文vtt,JS按en找就找不到) - 调试时优先查
srclang,它决定轨道能否被识别;label只影响UI,不影响功能
srclang值看似合理实则未被浏览器认可——它不像JS报错那样显眼,而是让整个<track>彻底消失在DOM和textTracks里。



















