单独使用无效,必须同时指定 srclang、label 和合法 src 指向 utf-8 无 bom 的 .vtt 文件,且 必须嵌在 内、 之后,否则浏览器静默忽略。

video 标签里 kind="subtitles" 的正确写法
直接写 <track kind="subtitles"></track> 是没用的,浏览器不会自动加载或显示字幕——必须配合 srclang 和 label,且 src 必须是合法可访问的 Web 字幕文件(通常是 .vtt)。
常见错误是把 SRT 当成 VTT 用,或者漏掉 srclang(导致字幕在设置里不出现),又或者 src 路径 404 却没检查控制台报错。
-
srclang必须是标准语言代码,比如"zh"、"en"、"ja",不能写"chinese"或"english" -
label是用户在播放器字幕菜单里看到的名称,可以自定义,比如label="中文(简体)" - 所有
<track></track>必须放在<video></video>开始标签和<source></source>之间,顺序无关,但放错位置(比如闭合后)会被忽略
多语言字幕怎么同时加进一个 video 元素
每个语言对应一个 <track></track>,只要 srclang 不同,浏览器就会把它们列为可选字幕。用户点击播放器字幕按钮就能切换。
注意:不是所有浏览器都默认开启字幕,首次加载时字幕通常处于“关闭”状态,需要用户手动启用;也不能靠 JS 自动触发显示(出于无障碍策略限制),但可以用 video.textTracks[0].mode = "showing" 强制激活某一条(仅限用户已交互过的页面)。
<video controls width="640"><source src="movie.mp4" type="video/mp4"><track kind="subtitles" srclang="zh" label="中文" src="sub-zh.vtt"><track kind="subtitles" srclang="en" label="English" src="sub-en.vtt"><track kind="subtitles" srclang="ja" label="日本語" src="sub-ja.vtt"></track></track></track></source></video>
VTT 文件格式不合规会导致字幕完全不加载
浏览器对 .vtt 文件格式非常严格:第一行必须是 WEBVTT(全大写,无空格、无 BOM),之后至少一个空行,再写字幕块。哪怕多一个 UTF-8 BOM 或首行写成 webvtt,Chrome / Safari 都会静默失败。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见坑:
– 用记事本保存 VTT 容易带 BOM,推荐用 VS Code 或 Sublime 保存为 UTF-8 without BOM
– 时间戳格式必须是 00:00:01.234 --> 00:00:03.456,不能用逗号分隔毫秒
– 每个字幕块之间必须有空行,否则后续块被忽略
验证方式:直接在浏览器地址栏打开 sub-zh.vtt URL,如果看到纯文本且时间轴正常渲染,说明格式基本过关;如果空白或报错,大概率是编码或语法问题。
为什么字幕菜单里看不到某个语言选项
最常被忽略的是 srclang 值未被浏览器识别,比如写了 srclang="zhs"(非标准)、srclang="cn"(应为 zh),或该 track 的 src 返回了 404/403(网络面板能看到请求失败,但播放器 UI 不提示)。
另一个隐蔽问题是:多个 <track></track> 的 srclang 相同(比如两个都写 zh),浏览器只认第一个,其余被丢弃——这时即使 label 不同,菜单里也只显示一项。
- 用 DevTools 的 Network 面板过滤
vtt,确认每个字幕文件都成功返回 200 - 检查
video.textTracks数组长度是否等于你写的<track></track>数量(在控制台执行) - 如果
textTracks[i].language是空字符串,说明srclang无效
字幕加载和激活是异步的,textTracks 列表可能延迟几毫秒才更新,别在 video 加载完就立刻查 length。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










