track标签必须紧接在video内所有source之后且为直接子元素，否则浏览器静默忽略；WebVTT文件需首行WEBVTT、UTF-8无BOM、标准时间戳格式、服务端返回text/vtt MIME类型。
track 标签位置错，字幕就等于没写
浏览器只在 <video></video> 开始标签之后、所有 <source></source> 结束之后的**紧邻位置**识别 <track></track>。它不认嵌套在 <div> 里的 <code><track></track>，也不认写在 <source></source> 前面或 外面的——哪怕多一个换行或注释，都会被跳过。
正确顺序必须是：
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <track kind="subtitles" label="中文" srclang="zh" src="sub.vtt" default> <p>您的浏览器不支持视频播放</p> </video>
-
<track></track>必须是<video></video>的**直接子元素**，不能包在任何容器中 - 多个
<track></track>之间不能有空行、<!-- -->注释或文本节点 - 如果用了
<source></source>，<track></track>就得排在它后面；没用<source></source>，也得紧贴<video></video>开始标签之后
WebVTT 文件格式和响应头缺一不可
Chrome/Firefox/Safari 遇到格式错误的 .vtt 会静默失败：控制台不报错、网络面板看不到加载失败、字幕就是空白。四个硬性条件必须全部满足：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 首行必须是严格大写的
WEBVTT（无空格、无 BOM、无注释） - 文件编码必须是 UTF-8 **无 BOM**（VS Code 右下角点编码 → “Save with Encoding” → 选 UTF-8）
- 时间戳格式只能是
00:00:01.234 --> 00:00:04.567，不能带 SRT 的序号行或空行分隔 - 服务器必须返回
Content-Type: text/vtt（Nginx/Apache 要手动配 MIME 类型；本地file://协议下必然失败，必须起服务如python3 -m http.server）
JS 控制字幕前必须等 track.readyState === 2
直接设 track.mode = "showing" 很可能无效——因为 .vtt 文件还没加载完，浏览器不会等你。
- 监听
video.textTracks[i].onload，或轮询检查track.readyState === 2（即TextTrack.LOADED）再操作 - 禁用当前轨道时，记得把其他同
kind的轨道设为"disabled"，否则可能多轨同时显示 - 移动端 Safari 默认隐藏原生字幕按钮，且忽略
default属性，必须自己做 UI + JS 控制mode
srclang 和 label 写错，用户根本选不到字幕
srclang 不只是“语言标识”，它是 JS 切换轨道时定位的唯一依据；label 不只是 UI 文字，缺失会导致下拉菜单里只显示“字幕”两个字，用户无法区分中英文。
-
srclang必须用标准 BCP 47 码，比如"zh"、"en-US"，别用"ch"或"cn" -
label必须显式写出，如label="简体中文"，不能留空或依赖浏览器自动推断 - 多个
<track></track>中只能有一个带default，否则全部失效
本地开发时用 file:// 打开 HTML，所有 .vtt 加载都会失败——这不是代码问题，是协议限制。还有就是服务器没配 text/vtt MIME 类型，Safari 就直接拒收，连控制台都不报错。
