track字幕不显示的三大原因：file://协议触发CORS静默失败，必须用HTTP服务；四个属性（kind、src、srclang、label）缺一不可；VTT文件首行、时间戳、编码任一错误即全盘失效。
track 元素本身不“加载”字幕，它只是向浏览器声明一个外部文本轨道；能否显示，取决于文件路径是否可访问、格式是否合规、属性是否写全——三者缺一不可。
为什么本地 file:// 协议下 vtt 文件总不显示
浏览器（Chrome/Firefox/Safari）在 file:// 协议下默认阻止跨源请求，而 track 的 src 属于资源加载行为，会触发 CORS 检查。即使文件和 HTML 在同一文件夹，file:// 也被视为无源（originless），导致静默失败——没有报错，但字幕菜单里根本看不到选项。
解决办法只有一个：起本地 HTTP 服务。比如：
-
python3 -m http.server 8000（Python 3） -
npx http-server（需 npm） - VS Code 插件 Live Server
然后用 http://localhost:8000/your-page.html 打开，src="zh.vtt" 才能被正常解析。
立即学习“前端免费学习笔记（深入）”；
track 标签必须写的四个属性
漏掉任意一个，该轨道就会被浏览器忽略（不是隐藏，是压根不注册进 video.textTracks）：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
kind="subtitles"：不能省略，不能拼错，不能写成caption或subtitles（末尾空格也不行） -
src="zh.vtt"：必须是相对或绝对 URL，不支持Blob URL（如blob:http://...会静默失效） -
srclang="zh"：用标准 BCP 47 码，如zh-Hans、en-US；别写chinese或zh-CN（后者虽常见但非规范） -
label="中文(简体)"：用户在右键字幕菜单里看到的名称，建议含括号注明变体
示例正确写法：
<video controls> <source src="lesson.mp4" type="video/mp4"> <track kind="subtitles" src="zh.vtt" srclang="zh-Hans" label="中文(简体)" default> </video>
vtt 文件本身出错，字幕就全灭
WebVTT 解析器零容错，以下任一错误都会让整个文件失效：
- 首行不是顶格、全大写、无空格、无 BOM 的
WEBVTT（写成webvtt、WebVTT、带空格或 BOM 都不行） - 时间戳格式不对：必须是
00:00:01.234 --> 00:00:04.567（毫秒三位、箭头前后各两个空格、冒号分隔） - 编码不是 UTF-8 无 BOM：Windows 记事本默认带 BOM，务必用 VS Code 或 Notepad++ 选 “UTF-8 without BOM” 保存
- 中文等非 ASCII 字符显示为方块？说明编码或字体回退失败，可在 CSS 中加
video::cue { font-family: sans-serif; }
想同时显示翻译+拼音？别用两个 track
浏览器只允许一个 subtitles 轨道处于 showing 状态。想实现“上行翻译、下行拼音”，必须把两者合并进同一个 .vtt 文件，用 <v class="translation"></v> 和 <v class="pinyin"></v> 包裹，并通过 CSS 控制换行与样式：
WEBVTT 00:00:01.000 --> 00:00:04.000 <v class="translation">你好</v><v class="pinyin">nǐ hǎo</v>
再配合：
video::cue(.translation) { display: block; }
video::cue(.pinyin) { display: block; margin-top: -0.5em; }
这才是真正可控的双行方案。依赖两个独立 track 并期望它们叠加，只会得到“只显示其中一个”的结果。
