track元素失效主因是结构、路径、服务端响应三处硬性门槛未满足：需紧贴source后、四属性齐全、VTT格式严格合规、MIME类型为text/vtt、跨域头正确，且JS需轮询readyState===2。
track 元素加载慢，不是“等一会儿就好”，而是大概率已经失败了——浏览器静默忽略，控制台不报错，字幕菜单里压根不出现。真正的问题往往不在 JS 控制逻辑，而在结构、路径、服务端响应这三处硬性门槛上。
为什么track写了却没反应？常见失效场景
这不是浏览器 Bug，是规范强制要求的“零容错”行为。只要以下任意一项不满足，track 就不会进 video.textTracks 列表：
-
track没紧贴在所有source之后、video开始标签之内（不能包在div里，不能放在source前面，不能有注释或空行隔开） -
kind、srclang、label、src四个属性缺一；srclang写成zh-CN可以，但chinese或cn不行 -
src指向的 .vtt 文件被服务器返回了text/plain或application/octet-stream，而不是text/vtt - 本地双击 HTML 文件打开（
file://协议），所有track.src请求被浏览器直接拦截
WebVTT 文件必须严格合规，否则全盘静默
Chrome/Firefox/Safari 对 VTT 解析几乎不做任何修复尝试。一个字符错，整个文件就丢弃：
- 首行必须顶格、全大写、无空格、无 BOM：
WEBVTT（不是webvtt，不是WEBVTT，不是带 UTF-8 BOM 的） - 时间戳格式必须为
00:00:01.234 --> 00:00:04.567，毫秒位必须三位，不能省略或补零错误 - 不能有 SRT 风格的序号行（如
1）、不能有空行分隔段落、不能有多余的空格或制表符 - VS Code 保存时选 “Save with Encoding → UTF-8”（不是 “UTF-8 with BOM”）
服务端 MIME 类型和跨域配置是关键卡点
即使文件内容完全正确，如果服务器没配对，浏览器照样拒收：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Nginx 配置需加：
types { text/vtt vtt; }，并确保该类型未被其他types块覆盖 - Apache 需在
.htaccess或主配置中添加：AddType text/vtt .vtt - 若
src是跨域地址（比如 CDN），服务端必须返回Access-Control-Allow-Origin: *，否则 Firefox/Edge 直接静默失败 - 用
curl -I https://xxx/example.vtt检查响应头，确认Content-Type: text/vtt存在且准确
JS 动态控制前必须等 track.readyState === 2
别信 video.addEventListener('loadedmetadata') 或 oncanplay ——它们不保证字幕已加载。正确时机只有两个：
- 监听
track.onload事件（仅对静态声明的track有效） - 轮询检查
track.readyState === TextTrack.LOADED（值为 2），再设track.mode = 'showing' - 动态插入的
track（如video.appendChild(trackEl)）必须等video.textTracks.length更新后，再等对应track的readyState
最常被忽略的一点：移动端 Safari 对 track 的解析更保守，哪怕服务端 MIME 正确、文件格式合规，若 video 元素尚未完成首次渲染（比如被 display: none 包裹或在懒加载容器里），track 也可能延迟数秒才进入 LOADED 状态——此时靠轮询比靠事件更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
