label 属性才是控制播放器中字幕名称显示的唯一有效属性,而非不存在的 title 属性;它必须与 kind 和 srclang 同时合法存在才能生效,且显示顺序由 HTML 中 track 元素的书写顺序决定。

track 的 label 属性就是字幕名称,不是 title 属性
很多人搜“track 标题”“字幕名称设置”,结果去改 title 或 name,但 <track></track> 根本没有 title 属性——真正控制播放器里显示的字幕名称的,只有 label。浏览器在右键菜单、CC 按钮下拉列表中展示的文本,完全取决于这个值。
-
label必须显式声明,为空或缺失时,部分浏览器显示(no label),用户无法区分多语言轨道 - 建议带括号注明语言变体,比如
label="中文(简体)"、label="English (UK)",避免和label="中文"冲突(尤其当同时存在繁体、拼音轨道时) - 不要用空格、特殊符号或过长字符串,某些移动端播放器会截断显示(iOS Safari 通常只显示前 12–15 个字符)
label 不生效?先检查 kind 和 srclang 是否齐全
即使写了 label="日本語",菜单里依然不出现,大概率是另外两个属性没配对:kind 和 srclang 缺一不可。浏览器把这三项当作一个轨道的“注册三元组”,漏掉任一,整个 <track></track> 就被静默忽略——控制台不报错,UI 里直接消失。
-
kind="subtitles"必须全小写、拼写完整;kind="subtitle"或kind="subtitles "(末尾空格)都无效 -
srclang必须是标准 BCP 47 语言标签,如zh、zh-Hans、ja、en-US;写成chinese、jp、zh_CN均不识别 - 三者必须同时存在且合法:缺
kind→ 轨道类型不明;缺srclang→ 无法归类为可切换字幕;缺label→ 用户看不到选项
多个 track 的 label 显示顺序由 HTML 顺序决定
浏览器按 <track></track> 在 HTML 中出现的先后顺序,排列右键菜单里的字幕项。它不按 srclang 排序,也不按字母顺序,更不会自动把 default 顶到最前面。所以如果你希望“中文(简体)”总排第一,“English”第二,“日本語”第三,就得严格按这个顺序写 DOM:
<video controls> <source src="lesson.mp4" type="video/mp4"> <track kind="subtitles" srclang="zh" label="中文(简体)" src="zh.vtt" default> <track kind="subtitles" srclang="en" label="English" src="en.vtt"> <track kind="subtitles" srclang="ja" label="日本語" src="ja.vtt"> </video>
- 修改顺序后需刷新页面,DOM 变更不会触发菜单重绘
- 不要在
<track></track>之间插入注释或空行,部分浏览器(如旧版 Safari)会中断解析后续轨道 -
default只影响初始启用状态,不影响菜单位置
label 改了但播放器没更新?可能是缓存或 mode 未同步
如果用 JavaScript 动态修改 track.label,播放器 UI 不会自动刷新菜单项——这是正常行为。label 是初始化时读取的只读提示信息,运行时改它没用。真要动态切换/重命名,得靠重建 <track></track> 元素并重设 mode:
立即学习“前端免费学习笔记(深入)”;
- 先遍历
video.textTracks,找到目标轨道,设track.mode = "disabled" - 移除旧
<track></track>,创建新元素,确保kind、srclang、label、src全部正确 - 用
video.appendChild(newTrack)插入,并立即执行newTrack.mode = "showing" - 注意:Safari 对动态插入
<track></track>支持不稳定,建议初始化时一次性写好所有轨道
最易被忽略的一点:label 看似只是“显示文字”,但它和 srclang 共同构成浏览器识别轨道身份的依据;改 label 却不改 srclang,可能导致 JS 逻辑里通过 textTracks[i].language 查找轨道失败。



















