label 属性必须填写且唯一，不能仅用“中文”等模糊值；浏览器字幕菜单是否显示、多条同语言字幕能否区分，完全取决于 label。
track 元素的 label 属性到底要不要填
必须填，而且不能只填“中文”“English”这种模糊值。浏览器原生字幕菜单（比如 Chrome 右键「字幕」或视频右下角的 cc 按钮）是否显示、能否区分多条同语言字幕，全看 label。不填或重复填写，会导致菜单项消失或合并——不是 bug，是规范行为。
常见错误现象：
– 添加了两条 zh-CN 字幕但只显示一个菜单项
– 点击字幕开关没反应，检查发现所有 label 都是空字符串或全为 "Chinese"
– Safari 完全不渲染字幕菜单，因为 label 缺失且 srclang 不唯一
-
label必须唯一，哪怕srclang相同（例如一条是“简体中文字幕（官方）”，另一条是“简体中文字幕（AI 生成）”） - 不要依赖
srclang自动映射成菜单名——它只用于语言识别，不参与显示 - 如果用户切换系统语言，
label仍按 HTML 中写的原文显示，不会自动翻译
怎么写 label 才算“友好命名”
友好 ≠ 简单，而是让用户在 1 秒内分辨出差异。重点不是语言代码，而是使用场景和内容特征。
- 包含角色/来源：例如
"English (Narration)"、"Japanese (Subtitles for Deaf/HoH)" - 标注生成方式：例如
"Chinese (AI-generated, v2.1)"、"French (Human-translated, verified)" - 区分版本或用途：例如
"Spanish (Latin America, educational)"、"Korean (with hanja annotations)" - 避免纯技术描述：
"zh-Hans"、"vtt-001"、"track_2"这类名字对用户无意义
多个 track 共存时 label 和 srclang 的配合逻辑
浏览器靠 srclang 做语言过滤（如系统设为日语时默认启用 srclang="ja"），靠 label 做最终呈现。两者要协同，不能矛盾。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 同一
srclang下，label必须不同；不同srclang下，label可以相似（如都含"(Official)"） - 不要用
srclang="zxx"（非语言内容）配有意义的label——多数浏览器会忽略该 track - 若需隐藏某条 track（如仅用于 JS 控制），设
default属性并搭配label=""，但注意：空label在部分旧版 Edge 中会导致 track 不加载 - 移动端 Safari 对
label长度敏感，超过 30 字可能截断，建议控制在 24 字以内
实际 HTML 写法与易错点
直接贴一段可复制粘贴的结构，关键在属性顺序和值选择：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="English (Original dialogue)" srclang="en" src="en.vtt" default><track kind="subtitles" label="English (Simplified for learners)" srclang="en" src="en-simple.vtt"><track kind="subtitles" label="中文（官方字幕）" srclang="zh-CN" src="zh.vtt"><track kind="subtitles" label="中文（听障优化版）" srclang="zh-CN" src="zh-hoh.vtt"></track></track></track></track></source></video>
容易被忽略的细节：
– <track></track> 必须在 <source></source> 之后、 之前，否则 Safari 不识别
– default 只能出现在一条 track 上，且该 track 的 label 不能为空
– 所有 src 路径需确保可跨域访问（CORS），否则 track 加载失败但控制台可能不报错
最麻烦的其实是测试环节：Chrome 开发者工具里看不出 label 是否生效，得真机点开视频右键菜单，或者用 VoiceOver / NVDA 辅助工具验证读出的内容是否匹配你写的 label。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
