HTML中track标签的default属性如何控制默认字幕的加载

作者：袖梨 2026-09-06

在前端开发内容学习中，HTML中track标签的default属性如何控制默认字幕的加载是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

default属性不表示自动显示字幕，仅标识默认候选轨道；是否启用取决于用户偏好、浏览器策略及历史操作，且需确保VTT加载成功、格式合规、路径正确、标签位置合法，JS主动设置mode="showing"并等待readyState===2才可靠。

default属性不等于自动显示字幕

加了 default 属性，字幕依然不出现，是正常现象。浏览器不会因为写了 default 就让字幕“一加载就显示”——它只表示这条轨道是“默认候选”，是否真正启用，取决于用户语言偏好、浏览器策略、甚至用户上次是否手动关过字幕。

常见错误是把 default 当作开关：以为只要写上，video.textTracks[0].mode 就一定是 "showing"。实际中，Chrome 可能设为 "showing"（前提是用户没关过），Firefox 和 Safari 多数情况下初始仍是 "disabled"，尤其在移动端 Safari 中，default 完全被忽略。

default 只能用在一个 <track> 上；多个都写 default，浏览器只认第一个，其余静默失效
srclang 必须符合 BCP 47 标准（如 zh、en-US），写成 chinese 或 zh_CN 会导致轨道注册失败，default 彻底无效
kind 拼错（比如 subtitle 少个 s，或带空格 "subtitles "）会让整个 <track> 被浏览器跳过解析

为什么写了default但textTracks里找不到或mode不是showing

根本原因往往是轨道压根没加载成功，而不是 default 失效。浏览器对 <track src="xxx.vtt"> 加载失败的处理非常安静：不报错、不触发 error 事件、控制台也无提示，你只能靠检查 video.textTracks 长度和每个 track.mode 值来判断。

VTT 文件路径错误（如相对路径写错、本地用 file:// 协议导致 CORS 阻止）→ 轨道不进 textTracks 列表
服务器未返回 Content-Type: text/vtt → Chrome/Firefox 可能拒绝解析，Safari 更严格
VTT 文件格式非法（缺 WEBVTT 开头、时间戳毫秒位不足三位、编码含 BOM）→ 整个文件被跳过，轨道 readyState 为 0（not loaded）
<track> 没放在 <source> 之后、或被包在 <div> 里 → 浏览器不识别，DOM 存在但不挂载到 video.textTracks

如何可靠地让某条字幕一加载就显示

别依赖 default，用 JS 主动设置 track.mode = "showing"。但必须等轨道加载完成，否则 textTracks 可能为空或 readyState 不足。

监听 loadedmetadata 或 canplay 事件比 DOMContentLoaded 更稳妥，因为 <track> 是异步加载的
遍历 video.textTracks，找 kind === "subtitles" 且 language === "zh" 的轨道，再设 mode；不要硬写索引 [0]
检查 track.readyState === 2（loaded）再操作，避免 race condition

示例代码：

video.addEventListener('loadedmetadata', () => {
const track = Array.from(video.textTracks).find(t => 
t.kind === 'subtitles' && t.language === 'zh' && t.readyState === 2
);
if (track) track.mode = 'showing';
});