弹窗视频中字幕标签必须置于内部且紧接所有之后，否则静默失效；WebVTT文件须UTF-8无BOM、首行严格为WEBVTT、时间戳格式正确、服务器返回text/vtt类型及CORS头。
弹窗视频里
弹窗（比如用 dialog、modal 或 JS 动态插入的 div）本身不改变 的解析规则——浏览器只认「 元素内部 + 所有
常见错误包括：
- 把
写在弹窗容器里、但不在内部（例如放在dialog的顶层） - 动态插入
后，用 JS 拼字符串把插到 - 用 innerHTML 替换整个
，但没保留的闭合顺序
正确结构示例（无论是否弹窗）：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default></track></source></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，弹窗不豁免跨域限制
是独立 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
浏览器对 属性是“全有或全无”逻辑：漏掉任意一个，该轨道就不会出现在右键字幕菜单里——不是不显示，是根本找不到。
关键点：
-
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"></track>
真正卡住人的地方往往不是语法，而是 WebVTT 文件本身带了 BOM、服务器没配 MIME、或者开发时一直用 file:// 协议跑——这些错误都不会在控制台明确提示“字幕加载失败”，只会让菜单里空空如也。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
