label属性为媒体起个名字_HTML字幕菜单显示名称

label属性用于在浏览器字幕菜单中显示轨道名称，必须与kind和srclang配合使用；单独设置无效，且需确保同一kind与srclang下label唯一，长度宜≤20字、不含HTML。

label 属性在 <track> 标签里到底起什么作用

label 是 <track> 元素的必需属性之一，但它不是给字幕“内容”起名，而是给浏览器字幕菜单里显示的选项起名。用户点开视频右下角的「字幕」按钮时看到的那行文字（比如“中文（简体）”“English”），就来自这个 label 值。

label 必须和 kind、srclang 搭配才有效

单独写 label="中文" 不会生效，浏览器可能直接忽略整条 <track>。它需要配合两个关键属性：

• kind="subtitles"（或 "captions"、"descriptions" 等合法值）——告诉浏览器这是哪类轨道
• srclang="zh"（语言代码必须规范）——否则 Chrome 会拒绝显示该条目，连 label 都不渲染

错误示例：<track kind="subtitles" label="中文">（缺 srclang，菜单里看不见）

正确写法：<track kind="subtitles" label="中文（简体）" srclang="zh" src="zh.vtt">

立即学习“前端免费学习笔记（深入）”；

label 值不能含 HTML 或换行，长度建议控制在 20 字以内

浏览器字幕菜单 UI 空间有限，过长的 label 会被截断甚至导致排版错乱。更关键的是，它不解析 HTML 实体或标签：

• label="中文 & English" → 菜单显示 “中文 & English”，不是 “中文 & English”
• label="中文<br>English" → 直接原样显示，不会换行
• label=""（空字符串）→ 多数浏览器会 fallback 到 srclang 值，但行为不一致，别依赖

推荐写法：label="简体中文" 或 label="English (CC)"

多语言字幕共存时，label 要有区分度，避免重复

同一视频加载多个 <track>，如果 label 相同（比如都写 "中文"），Chrome 和 Safari 可能只显示第一个，其余被静默丢弃——不是 bug，是规范要求：同一 kind + 同一 srclang 下，label 必须唯一。

• ✅ 正确：label="中文（简体）" + srclang="zh"，label="中文（繁體）" + srclang="zh-Hant"
• ❌ 危险：label="中文" + srclang="zh"，label="中文" + srclang="zh-Hans"（Chrome 认为语种重叠，后一条不进菜单）

真正起决定作用的是 srclang 的 BCP 47 规范匹配，label 只是给人看的，但人看的部分一旦重复，机器就懒得给你展示。