default属性不保证字幕自动显示，仅表示初始候选；需JavaScript监听loadedmetadata事件并设textTrack.mode='showing'才能真正启用。
加了 default 属性，字幕却没显示——这不是你写错了，而是它本就不保证“默认开启”。default 只是一个弱提示，浏览器是否响应、何时响应，取决于一连串苛刻条件。真想让字幕自动出现，得靠 JavaScript 主动控制。
default 属性的真实作用
default 不等于“自动显示”，它的含义是：在用户未手动操作字幕开关的前提下，该轨道被浏览器“选中”为初始候选。但选中 ≠ 显示，仍需用户点击播放器上的字幕按钮并启用它。多数现代浏览器（Chrome、Firefox）默认隐藏所有字幕轨道，default 仅影响菜单中的高亮状态，不触发实际渲染。
default 失效的常见原因
-
srclang 不匹配或不合法：比如写
srclang="chinese"或srclang="zh-CN"，但用户系统语言是zh；应统一用简写如zh、en - 多个 track 都写了 default：行为未定义，Chrome 可能忽略全部，Safari 可能只认第一个
-
kind 值错误：必须是
subtitles（不是subtitle少字母，也不是captions） -
vtt 文件加载失败：404、CORS 报错、MIME 类型不是
text/vtt、或用file://协议本地打开 -
track 标签位置错误：没放在
<source>之后、</video>之前，会被浏览器静默忽略
真正可控的默认启用方式
监听 loadedmetadata 事件，在轨道加载完成后，用 JS 手动设 mode = 'showing'：
<!-- 确保 track 在 source 之后 -->
<video id="myVideo" controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文">
<track kind="subtitles" src="en.vtt" srclang="en" label="English">
</video>
然后运行：
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
const userLang = navigator.languages?.[0]?.split('-')[0] || 'zh';
const target = Array.from(video.textTracks).find(t =>
t.kind === 'subtitles' && t.srclang?.startsWith(userLang)
);
if (target && target.mode !== 'disabled') {
target.mode = 'showing';
}
});
额外提醒：样式与兼容性
WebVTT 文件首行必须是 WEBVTT，空一行后再写字幕块；时间戳格式为 00:01:23.456 --> 00:01:25.789；保存为 UTF-8 无 BOM。Safari 对私密模式、CORS、MIME 类型更敏感，建议服务端配置 Access-Control-Allow-Origin: * 和 Content-Type: text/vtt。移动端部分浏览器不支持字幕 UI 自动唤起，JS 控制仍是目前最稳妥的方案。
