是。kind="captions"专为听障人士设计,需包含对白、音效(如[电话铃响])等完整音频信息,严格时间同步,且被辅助技术默认识别;而kind="subtitles"仅作语言翻译,不含非语音内容,不被辅助技术主动启用。

video 标签里 kind="captions" 是给听障人士用的吗?
不是。把 kind="captions" 理解为“专供听障人士”是常见误解——它实际对应的是 同步显示的对白文字(含说话人、音效等描述),目标用户包括听障人士,但更关键的是:它必须与音频内容严格时间对齐,且默认可开启/关闭。真正面向听障人士的辅助字幕,应优先用 kind="descriptions" 或外挂 kind="sign"(手语视频),但浏览器支持极差;实践中,kind="captions" 是唯一广泛兼容的选项,前提是字幕文件本身包含必要上下文(比如“[电话铃声]”“[笑声]”),否则对听障者无效。
怎么写才能让 kind="captions" 真正起作用?
光写 <track kind="captions" src="sub.vtt" srclang="zh"></track> 不够。关键在字幕文件内容和 video 元素配合:
-
.vtt文件第一行必须是WEBVTT,且每段需带精确时间戳(如00:00:01.200 --> 00:00:04.500),误差超过 0.5 秒就会不同步 - video 元素要加
controls属性,否则用户找不到字幕开关;iOS Safari 还要求显式设置crossorigin(即使同源)才能加载字幕 - 如果字幕含中文,
.vtt文件必须保存为 UTF-8 编码,且<track></track>标签里srclang="zh"不能写成zh-CN(部分 Android 浏览器会忽略)
kind="captions" 和 kind="subtitles" 到底差在哪?
区别不在功能,而在语义和默认行为:
-
kind="captions":浏览器默认视为“必要辅助功能”,部分系统(如 macOS VoiceOver)会自动启用;字幕内容应包含非语音信息(音效、角色名、语气) -
kind="subtitles":纯翻译用途,比如外语视频配中文字幕;不包含音效描述,也不被辅助技术默认启用 - 两者在 Chrome/Firefox 里表现几乎一样,但 Edge 对
captions的键盘快捷键(Ctrl+Shift+C)支持更好;Android WebView 则可能完全忽略subtitles
为什么字幕加载了却看不到?常见硬伤
最常卡在这几个地方:
- 服务器没配
CORS响应头(Access-Control-Allow-Origin: *),尤其当video和.vtt不同域时,控制台报Failed to load resource: net::ERR_FAILED但无明确提示 -
<track></track>标签放在<source></source>后面但没加default属性,导致首次播放时不自动激活(用户得手动点字幕图标) - 用 JavaScript 动态添加
<track></track>时,忘了调用video.textTracks[0].mode = "showing",DOM 插入成功≠字幕可见
字幕不是“写了就显示”,它依赖时间轴精度、编码一致性、CORS、浏览器策略四层校验。漏掉任何一层,对听障用户就是彻底不可用。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











