能,但必须满足两个硬条件:视频格式支持WebVTT字幕流,且浏览器解析时track的kind、srclang、label和src全部配对正确;常见错误是直接用SRT文件赋值src,浏览器会静默失败。

什么是 <track></track> 标签,它真能挂多语言字幕?
能,但必须满足两个硬条件:视频格式支持 WebVTT 字幕流(不是 SRT 直接扔进去就行),且浏览器解析时 <track></track> 的 kind、srclang、label 和 src 全部配对正确。常见错误是把本地 SRT 文件直接赋给 src——浏览器会静默失败,控制台连报错都没有。
-
kind="subtitles"是唯一被广泛支持的字幕类型;kind="captions"用于含音效描述的字幕,兼容性略差 -
srclang必须是合法 BCP 47 语言标签,比如zh-CN、en-US,写zh或english会导致切换失效 -
label是用户在右键菜单里看到的名字,建议和srclang语义一致,例如label="中文(简体)"
如何把 SRT 转成浏览器能吃的 WebVTT?
SRT 不是标准字幕格式,Chrome/Firefox/Safari 都不认它作为 <track></track> 的 src。必须转成 WebVTT(.vtt),且首行必须是 WEBVTT,后面空一行再写字幕块。
- 用命令行工具最稳:
ffmpeg -i input.srt output.vtt(需 ffmpeg 5.0+) - 在线转换容易出编码问题(特别是含中文的 SRT),推荐本地转;如果必须在线,选明确支持 UTF-8 + BOM 输出的工具
- 转完务必打开 .vtt 文件确认:第一行只有
WEBVTT,无空格无 BOM 异常,时间戳格式为00:00:01.234 --> 00:00:03.456
HTML 中怎么写多个 <track></track> 才能被正确识别?
顺序不重要,但每个 <track></track> 必须在 <video></video> 开始标签内部、<source></source> 之后,且不能放在 <video></video> 外面或闭合标签之后。浏览器只扫描这个范围内的 <track></track>。
<video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" srclang="zh-CN" label="中文(简体)" src="zh.vtt" default> <track kind="subtitles" srclang="en-US" label="English" src="en.vtt"> <track kind="subtitles" srclang="ja" label="日本語" src="ja.vtt"> </video>
-
default属性只能出现在一个<track></track>上,否则行为未定义(多数浏览器只启用第一个) - 所有
src路径必须可被同源策略访问;跨域需服务端加Access-Control-Allow-Origin - 不要用相对路径如
./sub/zh.vtt却把 HTML 放在子目录下——路径解析以 HTML 当前 URL 为准
为什么字幕菜单里看不到语言选项?
大概率是三个地方断了:字幕文件 HTTP 返回状态不是 200,Content-Type 响应头没设成 text/vtt,或者浏览器根本没加载到该 <track></track> 标签(DOM 结构错位或 JS 动态插入太晚)。
- 用浏览器 Network 面板过滤
vtt,确认每个字幕请求返回 200 且Content-Type: text/vtt - 如果用 Nginx,加配置:
add_header Content-Type "text/vtt";(注意不是text/plain) - 动态添加
<track></track>必须在<video></video>已插入 DOM 后操作,并调用video.textTracks检查是否已注册——有些浏览器不会自动发现后加的 track
WebVTT 解析很脆弱,一个非法字符(比如 UTF-8 编码错的中文)、一个时间戳重叠、甚至注释行没用 NOTE 开头,都可能导致整条 track 被丢弃。别信“看起来能播”,要进 DevTools → Elements → 查看 video.textTracks.length 是否等于你写的 <track></track> 数量。

















