default属性仅表示默认选中而非自动显示,用户仍需手动开启字幕;其生效前提包括kind="subtitles"、合法srclang、正确dom位置、vtt文件http服务及texttracks加载完成,且移动端safari完全忽略default。

default 属性只表示“默认选中”,不等于“自动显示”——用户仍需手动点击播放器的字幕开关才能看到字幕。
为什么加了 default 字幕还是不出现
浏览器加载视频后,<track default></track> 确实会让该轨道在 video.textTracks 列表中初始处于 mode === 'showing' 状态,但前提是:该轨道已被浏览器识别为有效、已加载完成、且未被用户之前的操作覆盖。常见失效原因包括:
-
kind拼错(如写成"subtitle"或"subtitles "带空格),整条<track></track>被静默忽略 -
srclang不合法(如"chinese"、"zh_CN"、空字符串),导致轨道无法注册进textTracks -
<track></track>没放在<source></source>之后、之前,或被包裹在其他标签里,浏览器直接跳过解析 - VTT 文件返回非
200或 MIME 类型不是text/vtt,加载失败但控制台无报错 - 移动端 Safari 完全不响应
default,track.mode初始恒为'disabled'
default 只能用在一个 <track></track> 上
多个 default 属性不会叠加生效,多数浏览器只启用第一个带 default 的轨道,其余被忽略——行为未定义,不可依赖。正确做法是:
- 确保只有一个
<track></track>含default属性 - 该轨道的
kind="subtitles"、srclang合法、label明确且唯一 - 若需根据用户偏好动态设默认,应移除 HTML 中的
default,改用 JS 在loadedmetadata后操作:track.mode = 'showing'(但仅当track.readyState === 2时才可靠)
Chrome 和 Firefox 对 default 的实际处理差异
Chrome 加载时会把 default 轨道设为 mode = 'showing',但前提是用户没在历史记录中手动关闭过;Firefox 更保守,即使有 default,首次加载也常保持 mode = 'disabled',需用户点一次 cc 按钮才激活。这意味着:
- 不能靠
default实现“免操作即见字幕”的体验 - 想真正自动开启,必须监听
textTracks.onchange或轮询textTracks[i].mode,再结合track.readyState判断是否可设'showing' - 测试时务必清空浏览器缓存和字幕偏好设置,否则旧选择会覆盖
default
真正决定字幕是否“可见”的,从来不是 default,而是 track.mode 的实时值 + 用户是否触发过 UI 开关——这个细节在开发调试时最容易被忽略。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











