default属性无法可靠默认开启字幕，仅在首次访问、未操作字幕控件且浏览器支持时可能生效；常见失效原因包括srclang不匹配、多个default、kind非subtitles、资源加载失败或未触发loadedmetadata事件。
default 属性不能可靠地“默认开启”字幕，它只在极有限条件下起作用：用户首次访问、未操作过字幕控件、且浏览器恰好支持该行为。
为什么加了 default 却没显示字幕
这不是你写错了，而是浏览器根本没按你想的执行。常见失效原因包括：
-
srclang值不合法（比如写成zh-CN，但用户系统语言是zh；或拼错为chinese） - 多个
<track></track>都写了default→ 多数浏览器直接忽略全部，或只启用第一个（行为未定义） -
kind不是"subtitles"（例如用了"captions"），部分浏览器（如 Safari）不对其应用default逻辑 -
<track src="xxx.vtt"></track>对应的文件返回 404、CORS 错误，或服务端没返回text/vttMIME 类型 → 轨道加载失败，default失去作用对象 - 视频尚未触发
loadedmetadata事件，DOM 中video.textTracks还为空，浏览器来不及处理default
default 的真实生效条件
它不是“默认打开”，而是一个初始状态信号，仅当同时满足以下全部条件时才可能启用：
- 页面首次加载，且用户从未点击过播放器上的字幕开关（包括关闭、切换、静音字幕等）
- 该
<track></track>的kind="subtitles"且srclang是有效 BCP 47 语言码（如zh、en-US） -
src可成功加载（HTTP 200 +text/vttMIME） - 同一
<video></video>中只有一个<track></track>带default属性 - 不是在 Safari 私密模式下 —— 此时连
<track></track>节点都可能被跳过解析
真正可控的默认启用方式：用 JS 主动设 mode
绕过 default 的不确定性，监听 loadedmetadata 后手动匹配并启用：
video.addEventListener('loadedmetadata', () => {
const lang = navigator.languages?.[0] || document.documentElement.lang || 'zh';
const targetTrack = Array.from(video.textTracks).find(track =>
track.kind === 'subtitles' &&
(track.srclang === lang || track.srclang.startsWith(lang.split('-')[0]))
);
if (targetTrack) {
targetTrack.mode = 'showing';
// 关闭其他字幕轨道，避免冲突
Array.from(video.textTracks)
.filter(t => t !== targetTrack && t.kind === 'subtitles')
.forEach(t => t.mode = 'disabled');
}
});
注意：textTracks 是实时集合，必须等 loadedmetadata 触发后才能遍历；mode 只能设为 "disabled"、"hidden" 或 "showing"，设其他值无效。
容易被忽略的关键点
default 在 iOS Safari（16.3 及更早）中基本不生效；即使在 Chrome 中，只要用户之前点过一次字幕按钮，刷新后就再也不会触发；VTT 文件路径错误或 MIME 类型不对时，控制台通常不报错，只会静默失败 —— 所以验证是否生效，不能只看播放器界面，得查 video.textTracks 的 mode 和 readyState 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
