必须将作为的直接子元素，紧接所有之后、之前；需同时设置kind、srclang、label、src四属性，且webvtt文件首行为全大写“webvtt”、无bom、时间戳毫秒三位、服务端返回text/vtt mime类型。
video 标签里怎么加 track 元素
直接在 <video></video> 内部用 <track></track>，不是放外面，也不是靠 JS 动态插入——浏览器只认嵌套在 <video></video> 里的 <track></track>，且必须在 <source></source> 之后、 之前。
常见错误是把 <track></track> 放到 <video></video> 外面，或者放在 <source></source> 前面，这时控制台不会报错，但字幕根本不会加载。
-
kind="subtitles"是必需的，不能写成"caption"或漏掉（除非你真要显示 caption，比如为听障用户提供声音描述） -
srclang必须是合法语言码，比如"zh"、"en"，写成"ch"或"cn"会导致字幕被忽略 -
label是用户在播放器字幕菜单里看到的名字，建议用可读字符串，比如label="中文（简体）" -
default属性只放一个 track 上，否则行为未定义；不加的话默认关闭
WebVTT 文件格式和路径怎么写才有效
字幕文件必须是 WebVTT 格式（.vtt），不是 SRT。哪怕内容看起来一样，SRT 文件会被静默忽略，控制台也不会提示错误。
WebVTT 文件开头必须有 WEBVTT 字样（顶行、无空格、无 BOM），后面空一行再写字幕块。常见坑是用文本编辑器另存为 UTF-8 时带了 BOM，导致浏览器解析失败。
- 路径用相对路径时，以 HTML 文件所在位置为基准，不是以视频文件位置为准
- 如果视频是
./videos/demo.mp4，字幕就该放在同级目录如./videos/demo.zh.vtt，然后src="./videos/demo.zh.vtt" - HTTP 服务必须支持
.vtt的 MIME 类型，应返回text/vtt；用file://协议本地打开会跨域失败，字幕不加载
为什么字幕不显示？检查这三件事
多数“字幕没出来”问题其实和代码无关，而是环境或配置卡住了。
- 播放器 UI 没开字幕开关：Chrome/Firefox 默认不自动启用字幕，得手动点「字幕」按钮并选中对应语言
- 视频没设置
controls属性：<video controls></video>才有字幕开关；没这个属性，即使 track 加载成功也无法切换 - 时间轴对不上：WebVTT 里的时间格式必须是
HH:MM:SS.mmm（毫秒三位），写成00:01:02.5少补零、或用逗号分隔（如00:01:02,500）都会让整段失效
JavaScript 动态加载字幕的边界情况
如果必须运行时加字幕（比如用户切换语言），可以用 JS 创建 <track></track> 并 append 到 <video></video>，但要注意：
- 必须在
video已插入 DOM 后操作，document.createElement("track")之后要video.appendChild(track)，不能只 append 到 body - 动态添加后需调用
video.textTracks[0].mode = "showing"才能立即显示，仅设default不生效 - 已加载的字幕 track 无法通过 JS 修改
src，只能 remove 旧的、add 新的
WebVTT 解析完全由浏览器内置处理，JS 无法干预解析逻辑，也不暴露解析错误——出错就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
