default属性不等于自动显示字幕,仅表示默认候选;其生效需满足kind="subtitles"、合法srclang、正确DOM位置、VTT文件HTTP 200且Content-Type为text/vtt、同一video中仅一个default这五个前提,缺一不可。

default 属性不等于“自动显示字幕”
它只是告诉浏览器:“如果用户没手动选其他轨道,且当前这个轨道又恰好匹配其语言偏好,那可以考虑把它作为默认候选”。但default本身不会让textTracks[i].mode变成"showing",也不会触发渲染——字幕依然黑屏,除非用户点播放器上的 CC 按钮。
default 生效的 5 个硬性前提
缺一不可,否则静默失效:
-
kind="subtitles"(不能是"subtitle"或"captions",拼错就忽略) -
srclang值合法且匹配用户系统语言(如用zh而非chinese或zh-CN,后者在部分浏览器不匹配) -
<track></track>必须放在<video></video>内部、<source></source>之后,不能被包裹在<div>里 <li>VTT 文件返回 HTTP 200 且响应头含<code>Content-Type: text/vtt,跨域需配crossorigin - 同一
<video></video>中仅有一个default——多个时多数浏览器只认第一个,其余被丢弃
为什么 Chrome/Firefox/Safari 表现不一致
Chrome 有时会在首次加载时把default轨道设为mode === "showing",但前提是用户从未点过字幕开关;Firefox 更保守,即使有default,初始mode也常是"disabled";Safari(尤其移动端)直接忽略default,mode恒为"disabled"。更麻烦的是:用户一旦手动关过一次字幕,浏览器会记住该选择并持久化,下次访问default彻底失效——这不是 bug,是规范行为。
真正可控的默认启用方式
别依赖default,用 JS 主动设mode:
立即学习“前端免费学习笔记(深入)”;
video.addEventListener('loadedmetadata', () => {
const track = Array.from(video.textTracks).find(t =>
t.kind === 'subtitles' && t.language === 'zh'
);
if (track && track.readyState === 2) {
track.mode = 'showing';
}
});
注意点:
- 必须监听
loadedmetadata,不是load或canplay——此时textTracks才稳定可用 - 检查
track.readyState === 2(loaded),避免VTT未加载完就赋值 - 不要用
textTracks[0]硬索引,不同浏览器加载顺序可能不同 - 移动端 Safari 需额外兼容:若
track.mode设完仍是"disabled",可尝试延迟 100ms 再设一次
最易被忽略的细节:default只影响“是否被浏览器选中为候选”,而字幕是否真正出现,只取决于track.mode === "showing"这一行运行时状态——调试时盯着这个值看,比反复改 HTML 更有效。



















