标签原生且唯一支持 WebVTT(.vtt)格式,因浏览器解析器严格校验:首行须为顶格大写 WEBVTT,时间戳毫秒三位(如00:01:23.456),不兼容 SRT 序号行或空行逻辑;改后缀无效,须用工具转码并确保 UTF-8 无 BOM、MIME 类型为 text/vtt。

<track></track> 标签原生支持 WebVTT(.vtt)格式,不是“兼容”,而是**唯一官方推荐且浏览器强制校验的字幕格式**。其他格式(如 SRT、ASS)必须先转成 VTT 才能被 <track></track> 正确加载和渲染。
为什么必须用 .vtt 而不是直接扔个 .srt?
浏览器对 <track></track> 的解析器只认 WebVTT 规范:首行必须是顶格大写 WEBVTT,时间戳毫秒位必须三位(00:01:23.456),且不接受 SRT 的序号行或空行逻辑。哪怕内容一模一样,把 .srt 改后缀为 .vtt 也会静默失败。
- Chrome / Firefox / Safari 都会直接忽略非标准 VTT 文件,控制台可能只报
Failed to load resource或更隐蔽的textTracks.length === 0 -
<track kind="subtitles" src="subs.srt"></track>看似写了,但实际轨道根本不会注册进video.textTracks - 服务器返回的 MIME 类型也必须是
text/vtt,返回text/plain或application/octet-stream同样会导致加载失败
怎么把 SRT/ASS/TXT 转成合规的 .vtt?
别手动改——时间轴偏移、BOM、空行、序号错位全是坑。优先走自动化流程:
- 在线转换:用 TinyWow Subtitles Converter 或 SubtitleConverter.com,上传后选输出格式
VTT,勾选Auto-detect encoding和Remove invalid lines - 命令行(适合批量):
ffmpeg -i input.srt -c:s:vtt output.vtt(注意 FFmpeg 5.1+ 才稳定支持此语法) - 桌面工具:Aegisub 导出时选
WebVTT (*.vtt),保存前务必在编码选项里选UTF-8 without BOM - 转完立刻用文本编辑器打开检查:第一行是不是纯
WEBVTT(无空格、无空行、无 UTF-8 BOM)、时间戳是不是严格HH:MM:SS.mmm --> HH:MM:SS.mmm、中文是否正常显示
HTML 中怎么正确调用 .vtt 字幕?
<track></track> 必须是 <video></video> 的**直接子元素**,且位置必须在所有 <source></source> 之后、 之前。漏掉任一必需属性,轨道就不会出现在字幕菜单里。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
-
kind="subtitles":不能写成caption、subtitles(末尾空格也不行) -
srclang="zh-Hans":用 BCP 47 标准码,zh或zh-CN也行,但chinese无效 -
label="中文(简体)":括号建议用全角,避免某些播放器截断 -
default:仅一个轨道可设,且只对kind="subtitles"或"captions"有意义;kind="chapters"加了反而可能干扰导航 - 跨域加载时,服务端必须返回
Access-Control-Allow-Origin: *,否则 Network 面板能看到 200 但textTracks为空
调试时最常被忽略的三件事
字幕没出来,90% 不是代码写错了,而是卡在这三个地方:
立即学习“前端免费学习笔记(深入)”;
- VTT 文件用 Windows 记事本保存过 → 带了 UTF-8 BOM → 换 VS Code,另存为 “UTF-8”(不是 “UTF-8 with BOM”)
- 服务器没配
.vtt的 MIME 类型 → Nginx 加types { text/vtt vtt; },Apache 加AddType text/vtt .vtt - 误以为
track.hidden = false能显示字幕 → 实际必须用 JS 控制textTracks[i].mode = "showing",或者靠default属性触发


















