track.default属性不能可靠默认开启字幕,仅在首次访问、未操作字幕控件且浏览器支持等极苛刻条件下可能生效;生产环境应改用JavaScript监听loadedmetadata后主动设置track.mode="showing"。

track.default 属性根本不能“解除关闭状态”
浏览器不把 default 当作“默认开启开关”,它只是个弱提示信号,且只在极苛刻条件下可能生效。你写了 default 却没看到字幕,不是配置漏了,而是这个属性本就不该被依赖。几乎所有生产环境都绕过它,直接用 JS 控制 mode。
video.textTracks 里怎么把字幕设为 showing
必须等 loadedmetadata 事件触发后才能操作,否则 video.textTracks 是空的或未就绪:
- 检查
track.readyState === 2(loaded),不是0(notLoaded)或1(loading) - 只对
track.kind === 'subtitles'且track.srclang匹配目标语言的轨道设track.mode = 'showing' - 设之前先确保
track.mode !== 'disabled';如果仍是disabled,说明用户手动关过,JS 无法绕过这个限制 - 多个字幕轨道时,记得把其他同 kind 的设为
'disabled',避免冲突
为什么 track.mode = 'showing' 有时没反应
常见原因不是代码写错,而是底层条件不满足:
-
src返回非200或 MIME 类型不是text/vtt→ 轨道加载失败,textTracks里压根没有这条 -
srclang值非法(如"chinese"、"zh_CN")→ 浏览器跳过解析,不进textTracks -
<track></track>没写在<video></video>直接子级、且在所有<source></source>之后 → DOM 结构错误,浏览器根本不处理 - Safari 私密模式下,
<track></track>节点可能被完全跳过解析,连textTracks.length都是0
本地开发时 track 加载失败的硬伤
用 file:// 协议双击打开 HTML 文件,<track src="xxx.vtt"></track> 必然静默失败——Chrome/Firefox 主动拦截跨文件请求,不报错、不发请求、Network 面板空白。这不是 bug,是安全策略。
立即学习“前端免费学习笔记(深入)”;
必须起本地 HTTP 服务:
- Python 3:
python3 -m http.server 8000 - Node.js:
npx http-server - VS Code 插件:Live Server(自动开
http://127.0.0.1:5500)
路径写相对地址(如 ./zh.vtt),别用绝对文件路径。



















