default属性仅表示“可默认启用”,不等于“默认显示”;用户仍需手动开启字幕,且其生效须同时满足kind="subtitles"、合法srclang、正确DOM位置、VTT文件HTTP服务及textTracks加载完成,移动端Safari则完全忽略default。

default属性不等于“默认显示”,只表示“可默认启用”
加了 default 的 <track> 不会自动让字幕出现在画面上——用户仍需点击播放器的「CC」按钮或右键菜单手动开启。浏览器只把该轨道的 mode 初始设为 "showing"(前提是加载成功且未被用户历史操作覆盖),但 UI 层是否渲染,取决于播放器控件是否响应、用户是否触发过开关。Safari 移动端甚至完全忽略 default,mode 恒为 "disabled"。
真正起作用的四个硬性条件
哪怕写了 default,也必须同时满足以下全部,才可能让轨道初始处于 mode === "showing":
-
kind必须是"subtitles"(不能拼错成"subtitle"或带空格) -
srclang必须是合法 BCP 47 语言码(如"zh"、"en-US";"chinese"或"zh_CN"无效) -
<track>必须作为<video>的直接子元素,且严格位于所有<source>之后、</video>之前 - VTT 文件必须返回 HTTP 200 状态码,且响应头含
Content-Type: text/vtt(否则静默失败,控制台无报错)
多个 default 会互相抵消
同一 <video> 中若出现多个 default,行为未定义:Chrome 可能只启用第一个,Firefox 可能全忽略,Safari 直接跳过。结果就是——没有字幕被启用。
- 确保仅一个
<track kind="subtitles">带default - 不要靠多个
default实现“fallback 语言”,那得用 JS 动态匹配 - 如果想根据
navigator.languages自动选轨,必须移除 HTML 中的default,改用 JS 在loadedmetadata后设置track.mode = "showing"
移动端 Safari 的特殊限制
iOS/iPadOS Safari 完全不响应 default 属性,textTracks[i].mode 加载后恒为 "disabled",且默认不显示字幕开关(除非你显式写了 <track kind="subtitles" default>,它才肯在控件里露出「字幕」按钮)。
立即学习“前端免费学习笔记(深入)”;
- 想在 Safari 上让字幕一加载就可见,必须用 JS 主动设
mode - 监听
loadedmetadata而非DOMContentLoaded,否则video.textTracks还是空数组 - 设
mode前务必检查track.readyState === 2(LOADED),否则无效
default 属性,而是 track.mode 的实时值 + 用户是否点过 CC 开关——这个状态分离,在调试时最容易被当成“bug”去查 VTT 文件,其实问题出在 mode 控制逻辑上。



















