浏览器默认禁用所有字幕轨道, 标签需同时满足kind为subtitles/captions、srclang为合法BCP 47码、位于直接子元素且在之后、VTT文件通过HTTP服务以text/vtt MIME类型提供、以及用户手动启用等五个条件,字幕才可显示。

直接加 标签不等于字幕就自动显示,浏览器默认禁用所有轨道,必须满足五个硬性条件才能让字幕真正出现在播放器菜单里并可被用户选中。
为什么写了 default 字幕还是不出现
因为 default 只表示“加载后默认选中”,不是“自动开启显示”。用户仍需手动点击播放器的字幕按钮并勾选——如果该轨道根本没进菜单,default 就毫无意义。
-
kind必须是"subtitles"或"captions";写成"zh"、"chinese"、"subtitle"都无效 -
srclang必须是合法 BCP 47 码,如"zh"、"en-US";"chinese"、空字符串、"cn"全部被忽略 -
必须是的**直接子元素**,且必须放在所有之后、其他内容之前 - VTT 文件必须通过 HTTP 服务访问(
file://协议下因 CORS 静默失败) - 服务器返回的
.vtt文件 MIME 类型必须是text/vtt,不是application/octet-stream或text/plain
video.textTracks 无法设为 "showing" 怎么办
JS 不能绕过用户授权强行显示字幕。浏览器对 track.mode 的修改有前置校验:只有当 track.mode !== 'disabled' 时,track.mode = 'showing' 才生效。
- 先检查
track.readyState === 2(loaded),否则mode设置会静默失败 - 遍历
video.textTracks找到目标轨道:track.kind === 'subtitles' && track.language === 'zh' - 只在
track.mode !== 'disabled'时执行track.mode = 'showing',否则跳过 - 更可靠的做法是监听
textTracks.onchange,等用户手动启用后再做 UI 同步或样式增强
多语言字幕和 captions 轨道怎么配才合规
WCAG 2.1 第 1.2.2 条要求“同步媒体的字幕必需”,只放一个 不够,必须显式声明语言、提供 label、至少一条带 default,且 kind 类型要区分用途。
- 面向听力正常但需翻译的用户,用
kind="subtitles"+srclang="zh"+label="中文" - 面向听障用户,用
kind="captions"+srclang="en"+label="English (CC)",内容需含音效描述(如 [门铃响]) - 不要给
kind="descriptions"设default,主流浏览器根本不支持自动播放独立音轨,它只是供屏幕阅读器识别的元数据提示 - 至少一条
subtitles或captions必须带default属性,否则首次播放无任何字幕可选
最容易被忽略的是服务器配置:VTT 文件路径没错、HTML 写得再标准,只要响应头里 Content-Type 不是 text/vtt,轨道就会加载失败且 DevTools 里可能只报模糊的 “Failed to load resource”,连错误详情都不给。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











