HTML标签如何给视频添加个性化字幕名称？

本文共计670个文字，预计阅读时间需要3分钟。

是是是

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 只是给人看的，但人看的部分一旦重复，机器就懒得给你展示。