HTML 标签仅原生支持 WebVTT(.vtt)格式,不解析 SRT、ASS 等;必须确保文件首行为 WEBVTT、UTF-8 无 BOM 编码、时间戳格式严格为 HH:MM:SS.mmm、字幕块间用空行分隔;kind 和 srclang(须为 ISO 639-1 小写双字母码)影响轨道行为与默认启用;跨域加载需服务端配置 CORS 与 text/vtt MIME 类型,否则静默失败。

HTML <track></track> 只支持 WebVTT(.vtt)格式
浏览器原生 <track></track> 标签**不解析 SRT、ASS、SUB 等其他字幕格式**,哪怕你把 src 指向一个 sub.srt 文件,也会静默失败——控制台通常不报错,但 video.textTracks.length 为 0 或轨道始终处于 disabled 状态。
必须将原始字幕转为 WebVTT,并确保文件以 WEBVTT 开头、UTF-8 无 BOM 编码。SRT 转 VTT 工具很多,比如在线的 srt2vtt 或桌面软件 Subtitle Edit;注意别用仅改后缀名的方式“伪装”成 .vtt,内容结构不合法照样无效。
WebVTT 文件必须满足三项硬性规范
常见加载失败,90% 出在文件本身。不是“写了 .vtt 就能用”,而是要过三关:
-
WEBVTT必须是文件第一行,全大写、前后无空格、无 UTF-8 BOM 字节(可用 VS Code 查看编码并另存为“UTF-8 无 BOM”) - 时间戳格式严格为
HH:MM:SS.mmm --> HH:MM:SS.mmm(毫秒三位,不能少也不能多,00:01:02.5会失败) - 每段字幕块之间必须用**空行**分隔,序号(如
1)是可选的,但若出现则不能重复或跳号
示例有效开头:
立即学习“前端免费学习笔记(深入)”;
WEBVTT 1 00:00:01.000 --> 00:00:04.500 你好,欢迎观看。
<track></track> 的 kind 和 srclang 不是摆设
kind="subtitles" 是最常用值,但它和 kind="captions" 在语义与行为上不同:前者面向听觉正常用户(翻译字幕),后者面向听障用户(含音效描述),部分浏览器对 captions 有强制开启逻辑(如系统开启“字幕偏好”时自动启用 captions 轨道,忽略 default)。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
srclang 必须用 ISO 639-1 小写双字母码(zh、en、ja),不能写 zh-CN 或 Chinese;否则浏览器无法匹配系统语言,default 失效,且 JavaScript 中 textTrack.language 返回空字符串。
多个 <track></track> 并存时,label 值必须唯一,否则某些浏览器(如 Safari)菜单里只显示第一个同名项。
CORS 与 MIME 类型是跨域加载失败的两大隐性原因
当字幕文件放在 CDN 或独立域名下时:src 链接必须可跨域访问,即服务端需返回 Access-Control-Allow-Origin: *(或指定域名),否则 video.textTracks 列表为空,控制台可能只报 Failed to load resource 而不提 CORS。
服务器还需正确声明 MIME 类型为 text/vtt。Nginx 示例配置:types { text/vtt vtt; };Apache 加 AddType text/vtt .vtt。若返回 text/plain 或 application/octet-stream,Chrome/Firefox 会拒绝解析。
本地开发时(file:// 协议)所有跨域限制都会触发,务必用本地 server(如 python3 -m http.server)测试,不要双击 HTML 打开。
最容易被忽略的是:即使所有标签写对、文件也合规,只要服务器没配 text/vtt MIME 或缺少 CORS 响应头,字幕就永远不会出现——它不会报 JS 错误,也不会在开发者工具的 Network 面板标红,只会安静地不工作。


















