弹窗视频中字幕标签必须置于内部且紧接所有之后，否则静默失效；WebVTT文件须UTF-8无BOM、首行严格为WEBVTT、时间戳格式正确、服务器返回text/vtt类型及CORS头。
弹窗视频里
弹窗（比如用 dialog、modal 或 JS 动态插入的 div）本身不改变 <track></track> 的解析规则——浏览器只认「<video></video> 元素内部 + 所有 <source></source> 闭合之后」这个位置。放错就静默失效，控制台不会报错。
常见错误包括：
- 把
<track></track>写在弹窗容器里、但不在<video></video>内部（例如放在dialog的顶层） - 动态插入
<video></video>后，用 JS 拼字符串把<track></track>插到<source></source>前面 - 用 innerHTML 替换整个
<video></video>，但没保留<track></track>的闭合顺序
正确结构示例（无论是否弹窗）：
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default> </video>
WebVTT 文件必须 UTF-8 无 BOM，首行严格为 WEBVTT
弹窗场景下容易忽略：本地双击打开 HTML 时，file:// 协议会直接拦截所有 .vtt 请求（连预检都不发），字幕必然空白。这不是代码问题，是浏览器策略。
立即学习“前端免费学习笔记（深入）”；
必须确保：
-
.vtt文件用 VS Code / Notepad++ 保存为「UTF-8 无签名」（不是「UTF-8」） - 首行只有
WEBVTT四个大写字母，顶格、无空格、无注释、无空行 - 时间戳格式为
00:00:01.234 --> 00:00:04.567（毫秒用句点，非逗号） - 服务器返回
Content-Type: text/vtt（Nginx/Apache 需显式配置 MIME）
src 路径必须同源或配好 CORS，弹窗不豁免跨域限制
<track src="..."></track> 是独立 HTTP 请求，和视频本身无关。哪怕视频和字幕都在同一目录，用 file:// 打开也会失败；部署后若字幕放在 CDN，必须服务端返回 Access-Control-Allow-Origin: *。
典型报错（控制台可见）：
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource.
调试建议：
- 右键 → “检查” → Network 标签页，筛选
vtt，看请求是否 200 且响应头含text/vtt - 不要用相对路径如
./sub/zh.vtt混淆层级，统一用根路径/sub/zh.vtt更可靠 - 避免大小写问题：
ZH.VTT和zh.vtt在 Linux 服务器上是两个文件
四个属性缺一不可：kind、src、srclang、label
浏览器对 <track></track> 属性是“全有或全无”逻辑：漏掉任意一个，该轨道就不会出现在右键字幕菜单里——不是不显示，是根本找不到。
关键点：
-
kind必须是"subtitles"（不能是"subtitle"或"captions"）；后者用于听障描述，UI 分开显示 -
srclang必须是标准 BCP 47 码，如"zh-Hans"、"en-US"；写"chinese"或"zh-cn"无效 -
label不能为空，否则菜单显示(no label)，用户无法识别 -
default只影响初始状态，不保证自动开启——用户仍需点击播放器上的字幕按钮
最简可用组合：
<track kind="subtitles" src="/sub/en.vtt" srclang="en" label="English">
真正卡住人的地方往往不是语法，而是 WebVTT 文件本身带了 BOM、服务器没配 MIME、或者开发时一直用 file:// 协议跑——这些错误都不会在控制台明确提示“字幕加载失败”，只会让菜单里空空如也。
