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

label属性：给媒体轨道起个“菜单名”

在HTML的标签中，label属性扮演着一个看似简单却至关重要的角色：它并非用于标记字幕内容本身，而是专门为浏览器内置的字幕菜单选项提供显示名称。换句话说，当用户点击视频播放器右下角的「字幕」或「CC」按钮时，弹出的选项列表里，那些诸如“中文（简体）”、“English (CC)”的友好名称，其来源正是label属性的值。

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

简单来说，label就是轨道在用户界面的“门面”。它不参与字幕内容的解析与渲染，只负责在菜单里告诉用户“这是什么”。一个清晰、准确的label能极大提升无障碍访问体验和用户选择效率。

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

这里有个关键点：label属性不能单打独斗。如果单独设置label="中文"，浏览器很可能会直接忽略整条轨道。它必须与另外两个属性协同工作才能生效：

• kind属性：用于声明轨道的类型，例如kind="subtitles"（字幕）、"captions"（说明性字幕，包含音效描述）、"descriptions"（视频描述）等。这是轨道功能的根本定义。
• srclang属性：用于指定轨道文本内容的语言代码，必须使用规范的BCP 47语言标签（如"zh"表示中文，"en"表示英语）。如果缺失或格式错误，像Chrome这样的浏览器会直接拒绝显示该条目，连label都不会出现在菜单里。

来看一个典型的错误示例：。这条轨道缺少了srclang，结果就是用户在字幕菜单里根本找不到“中文”这个选项。

正确的写法应该是：。这样，浏览器才能正确识别并将其纳入可选的轨道列表。

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

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

为label赋值时，需要考虑到浏览器字幕菜单的实际显示空间。这个空间通常有限，过长的标签名会被截断，甚至可能破坏菜单的排版。

更需要注意的一点是：label的值是纯文本，浏览器不会对其中的HTML实体或标签进行解析。这意味着：

• 如果你写入label="中文 & English"，菜单里显示的就是字面量的“中文 & English”，而不是“中文 & English”。
• 如果你试图用label="中文
English"来强制换行，结果只会原样显示这段字符串，不会产生任何换行效果。
• 将label设为空字符串""的行为在浏览器间并不一致。虽然部分浏览器可能会回退显示srclang的值，但依赖这种不确定行为并非好主意。

因此，推荐的实践是使用简洁、明确的短语，例如label="简体中文"或label="English (CC)"，并将长度控制在20个字符以内以确保最佳显示效果。

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

当一个视频需要加载多条字幕轨道（比如同时提供简体中文、繁体中文和英文字幕）时，label的设置就需要格外讲究了。

根据规范，在同一kind类型（比如都是subtitles）且同一srclang语言代码下，label的值必须是唯一的。如果出现重复，像Chrome和Safari这样的浏览器可能只会显示第一条匹配的轨道，而将后续重复的轨道静默丢弃——这并非程序漏洞，而是遵循标准的设计。

• ✅ 正确做法：通过label和srclang共同精确区分。例如：label="中文（简体）" srclang="zh" 与 label="中文（繁體）" srclang="zh-Hant"。
• ❌ 危险做法：label="中文" srclang="zh" 与 label="中文" srclang="zh-Hans"。尽管srclang略有不同，但Chrome可能会认为语种重叠，导致后一条轨道无法进入菜单。

说到底，机器内部真正依赖的是srclang的规范匹配。而label是给人看的“面子”，但如果这个“面子”重复了，机器就可能认为选项冗余，从而不再提供选择。确保label的唯一性和可读性，是多轨道配置成功的关键一步。