track是HTML5明确定义的14个空元素之一，禁止闭合标签或斜杠自闭合；其字幕失效主因是结构错误（如未紧贴source后、不在video内）、属性缺失、VTT格式或MIME类型不合规，且均静默忽略。
track 元素根本不会因为“缺少闭合”而报错——它压根就不该有闭合标签，写了反而违规。
为什么track不能写<track></track>
track 是 HTML5 明确定义的 14 个 void elements（空元素）之一，语义上不承载内容、不支持子节点，因此语法上禁止任何形式的闭合：
-
<track src="a.vtt"></track>→ 违反规范，浏览器会把后续所有内容（直到下一个合法结束标签）误认为是track的子内容，导致 DOM 结构错乱 -
<track src="a.vtt"></track>→ 属于 XHTML 遗留写法，在纯 HTML5 中无必要；部分模板引擎（如旧版 Vue SFC）会按 XML 解析，造成属性截断或解析失败 -
<track src="a.vtt"></track>（无斜杠、无闭合）→ 唯一合规写法
实际开发中哪些错误会导致字幕静默失效，但控制台不报错
真正让字幕“消失”的，往往不是闭合问题，而是更隐蔽的结构性错误。这类问题浏览器一律静默忽略，连 console warning 都没有：
-
track没放在video内部，哪怕只多一个换行或包在<div> 里 <li> <code>track写在source标签之前（必须紧贴所有source之后） - 漏掉
kind、srclang、label、src四个必需属性中的任意一个 - VTT 文件首行不是严格大写的
WEBVTT，或含 UTF-8 BOM - 服务端返回的 MIME 类型不是
text/vtt，或缺失 CORS 头（跨域场景下） - 打开 Elements 面板，确认
track节点确实出现在video开始标签后、所有source闭合之后，且是video的直接子节点（无父级div、span等） - 在 Console 中执行：
document.querySelector('video').textTracks—— 若返回空列表或length === 0，说明浏览器根本没加载到任何轨道 - 检查 Network 面板，确认 VTT 文件已发起请求、状态码为 200、Response Headers 中包含
Content-Type: text/vtt
如何快速验证track是否被浏览器识别
别依赖肉眼检查 HTML 结构，用 DevTools 直接看 DOM 和轨道状态：
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：DOM 必须在 video 加载完成前就存在；用 JS 动态插入 track 到已渲染的 video 内部，浏览器不会重新解析，字幕永远不会出现。
