track标签本身不添加字幕，仅声明外部webvtt轨道；需同时满足.vtt文件合规、位置紧贴source后、服务端返回text/vtt mime类型、kind/srclang/label属性正确四条件，缺一即静默失效。
track 标签本身不能“添加字幕”，它只是告诉浏览器：「这里有份字幕文件，按这个规则加载」——真正起作用的是 src 指向的 WebVTT 文件，以及 kind、srclang、label 这三个关键属性是否配对正确。
必须用 kind="subtitles"，不是 "caption" 或 "descriptions"
很多人把字幕（subtitles）和 CC（closed captions）混淆。kind="subtitles" 是给听懂语音但需要翻译的人用的，支持双语混排、不强制显示；而 kind="captions" 是为听障用户设计的，会强制渲染时间轴+音效描述，且浏览器默认行为不同。中文多语言场景下，99% 应该用 kind="subtitles"。
-
kind="subtitles"：适用于中/英/日等语言互译，用户可手动开启/切换 -
kind="captions"：含「[音乐]」「[电话铃声]」等非语音信息，国内视频平台极少用 -
kind="descriptions"或"chapters"与字幕无关，别误填
srclang 必须是合法 BCP 47 语言标签，比如 zh、zh-Hans、en，不能写 Chinese 或 english
浏览器靠 srclang 匹配系统语言或用户手动选择，拼写错误或格式不规范会导致字幕不出现。常见错误：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写成
srclang="Chinese"→ ❌ 浏览器不认识 - 写成
srclang="zh-CN"→ ✅ 可用，但推荐更通用的zh-Hans（简体中文）或zh-Hant（繁体中文） - 英文必须用
en，不是eng或English - 同一视频多个
track的srclang值不能重复
示例正确写法：<track kind="subtitles" src="sub-zh.vtt" srclang="zh-Hans" label="简体中文"></track><track kind="subtitles" src="sub-en.vtt" srclang="en" label="English"></track>
WebVTT 文件路径必须可访问，且响应头需含 Content-Type: text/vtt
即使 HTML 写对了，如果服务器返回 text/plain 或 404，字幕照样不加载。本地开发时尤其容易踩坑：直接双击 HTML 打开，file:// 协议下浏览器会拒绝加载 track 资源（CORS 策略限制）。
- 务必通过本地服务预览，比如
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 检查浏览器开发者工具 Network 面板，确认 .vtt 文件状态码是 200，且 Response Headers 中有
Content-Type: text/vtt - VTT 文件首行必须是
WEBVTT（全大写，无空格），否则解析失败
最常被忽略的一点：字幕是否生效，和 <video></video> 元素是否设置了 controls 属性强相关。没有 controls，即使所有配置都对，用户也找不到开关入口——浏览器不会自动弹出字幕，也不会在右键菜单里暴露选项。要测试，得先确保有播放控件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
