kind、srclang、label三属性缺一不可,任一缺失或错误(如kind="subtitle"、srclang="ch"、label为空)均导致轨道被浏览器静默忽略,字幕菜单中完全不显示该选项。

kind、srclang、label 三个属性缺一不可
浏览器不把 track 当字幕看,根本原因往往是这三个属性没写全或写错。它不会报错,只是静默忽略——字幕菜单里压根不出现该选项。
-
kind="subtitles":必须是这个字符串,不能是"subtitle"、"captions"或留空;末尾多一个空格都会失效 -
srclang="zh":必须用标准 BCP 47 语言码,"zh"、"en-US"、"ja"合法;"ch"、"chinese"、"cn"全部无效 -
label="中文(简体)":这是用户在右键菜单或控件栏里看到的名字,不能为空;建议带括号注明变体,否则多个中文轨道无法区分
src 路径和服务器响应必须同时达标
src 指向的 .vtt 文件,光路径对还不够。它得过四关,漏一关就加载失败,且控制台通常不报错。
- HTTP 状态码必须是
200(本地开发用file://协议必 404,必须起本地服务) - 服务端必须返回
Content-Type: text/vtt(Nginx/Apache 需手动加 MIME 类型配置) - 文件首行必须严格为
WEBVTT(全大写、顶格、无空格、无 BOM) - 编码必须是 UTF-8 无 BOM(VS Code 右下角点编码 → “Save with Encoding” → 选
UTF-8,不是UTF-8 with BOM)
default 属性只能设在一个 track 上,且仅影响首次加载
default 不是“默认启用”,而是“页面加载完成时自动启用”。但它有硬限制:多个 track 中只能有一个带 default,否则行为未定义(Chrome 会忽略全部,Firefox 可能只认第一个)。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
- 用户手动切换一次后,
default就不再起作用;刷新页面才会重置回该轨道 - 移动端(尤其 iOS Safari)基本无视
default,不会自动显示字幕 - 想实现“按系统语言自动匹配”,得靠 JS 读取
navigator.language后调用textTracks[i].mode = "showing"
HTML 结构错一位,整个 track 就静默失效
track 必须是 video 的直接子元素,且位置固定:紧接在所有 source 之后、/video 之前。任何偏移都会让浏览器彻底跳过它。
- 不能放在
source前面 - 不能写在
video外部(哪怕只多一个换行或包在div里) - 多个
track之间不能夹注释、空行或其它标签(部分浏览器解析中断) - 正确顺序示例:
真正卡住人的地方,往往不是某一行代码写错了,而是四个条件里有一个没闭环:文件编码、MIME 类型、HTML 结构、属性值,任一环节松动,字幕就消失得毫无征兆。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










