HTML的default属性无法确保中文字幕自动显示，必须在loadedmetadata事件中用JavaScript主动匹配zh开头的srclang并设track.mode为showing，同时校验readyState===2。
default属性根本不会让字幕“自动显示”
加 default 不等于用户一打开视频就看到中文，它只表示“这个轨道可被默认启用”，但浏览器是否真把它设为 showing，取决于一堆条件：用户是否首次访问、是否手动关过字幕、浏览器类型、srclang 是否匹配系统语言、VTT 文件是否加载成功…… Safari 移动端甚至直接忽略 default，track.mode 初始永远是 disabled。
想让中文字幕一加载就可见，必须用 JS 主动设 mode
靠 HTML 的 default 属性不可控，真正能落地的做法是在 loadedmetadata 事件里手动匹配并启用中文轨道。关键点有三个：
-
loadedmetadata是最稳妥的触发时机——此时video.textTracks已就绪，且所有<track></track>都已解析完成 - 匹配逻辑不能只看
srclang === 'zh'，要兼容zh-CN、zh-Hans等变体，建议用track.srclang.startsWith('zh') - 设
mode = 'showing'前，务必确认track.readyState === 2（即已加载完成），否则静默失败
示例代码：
video.addEventListener('loadedmetadata', () => {
const zhTrack = Array.from(video.textTracks).find(t =>
t.kind === 'subtitles' && t.srclang && t.srclang.startsWith('zh') && t.readyState === 2
);
if (zhTrack) zhTrack.mode = 'showing';
});
中文字幕不出现的五个高频原因
即使写了 default 并配了 JS，字幕仍不显示，大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
-
kind写成caption或subtitles（末尾空格）——浏览器直接跳过该<track></track> -
srclang="chinese"或srclang="zh_CN"—— 必须是合法 BCP 47 格式，如zh、zh-Hans、zh-CN - VTT 文件返回 404 或 MIME 类型不是
text/vtt—— 浏览器静默失败，控制台无报错，但track.readyState始终为 0 -
<track></track>没放在<source></source>之后、之前 —— 被浏览器忽略，DOM 中存在但未注册进textTracks - 多个
<track></track>都写了default—— 行为未定义，Chrome 可能只认第一个，Firefox 可能全忽略
移动端 Safari 的特殊处理
在 iOS/iPadOS Safari 上，default 属性完全无效，track.mode 初始恒为 disabled，哪怕你清空缓存、重装页面也没用。唯一可靠路径是 JS + loadedmetadata + 显式设 mode。但要注意：Safari 对跨域 VTT 有更严 CORS 要求，若字幕文件不在同源下，必须服务端返回 Access-Control-Allow-Origin: *，否则 readyState 卡在 0。
真正决定字幕是否出现的，从来不是 default 这个 HTML 属性，而是 track.mode 的实时值 + 用户是否触发过 UI 开关——这个状态关系，在调试时最容易被当成“浏览器 bug”而绕开本质问题。
