必须设kind="subtitles"才能在字幕菜单显示；srclang须为标准bcp 47码（如zh、en-us）；vtt首行必须顶格全大写webvtt、无bom、时间戳毫秒三位、服务器返回text/vtt mime类型。
track元素的kind属性必须设为subtitles才能加载字幕
浏览器只识别 kind="subtitles" 的 <track></track> 作为可切换字幕，设成 captions（带音效描述）、descriptions 或其他值都不会在字幕菜单里显示。中英双语字幕要分别用两个 <track></track>，各自指定 srclang 和 label。
中英文track必须用不同srclang且匹配浏览器语言设置
srclang 值必须是标准 BCP 47 语言标签，比如中文用 zh 或 zh-CN，英文用 en 或 en-US。浏览器字幕菜单是否默认选中某条，取决于用户系统/浏览器语言设置和 srclang 是否精确匹配——zh 能匹配简体中文环境，但 zh-TW 在大陆系统里通常不会自动激活。
<track kind="subtitles" srclang="zh" label="中文" src="zh.vtt"></track><track kind="subtitles" srclang="en" label="English" src="en.vtt"></track>
VTT文件格式出错会导致字幕完全不显示
哪怕 HTML 结构全对，只要 VTT 文件第一行不是 WEBVTT（注意大小写、无空格、无BOM），或者时间戳格式错误（如用逗号分隔毫秒：00:00:01,234 是对的，00:00:01.234 是错的），浏览器就会静默忽略该 track。常见坑：
- 用记事本保存 VTT 文件时默认加了 UTF-8 BOM，导致解析失败 → 改用 VS Code 或 Notepad++ 保存为「UTF-8 无 BOM」
- 中文字符没转义或编码不对 → 确保 VTT 文件声明
WEBVTT<u></u>后紧跟换行，且整体用 UTF-8 编码 - 时间轴重叠或顺序错乱 → 浏览器可能跳过整段，建议用
vtt-validator工具校验
Chrome/Firefox 对多track的默认行为不一致
Chrome 会记住用户上次手动选择的字幕语言，并在下次播放时恢复；Firefox 则更依赖 srclang 与系统语言的匹配度，且不保存偏好。如果希望中文字幕默认启用，可以在 JS 中主动调用 video.textTracks[0].mode = "showing"，但要注意：只有 DOM 加载完成、track 已加载完毕后才能操作，否则 textTracks 可能为空或 mode 不可写。
真正容易被忽略的是：字幕文件路径必须可跨域访问（同源或服务端配了 Access-Control-Allow-Origin），否则控制台报 Failed to load resource，但 <track></track> 标签本身不会报错，字幕就悄无声息地消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
