TextTrack.mode属性有三个合法值:SHOWING(强制显示)、HIDDEN(隐藏但保留访问)、DISABLED(完全禁用);需通过video.textTracks获取轨道后设置,推荐使用TextTrack.SHOWING等静态常量赋值。

在 HTML5 中,TextTrack 对象的 mode 属性用于控制字幕(或其它文本轨道,如描述、章节等)的显示状态。它不是简单的布尔开关,而是通过三个预定义常量值来精确控制:显示、隐藏或仅在用户主动选择时显示。
mode 属性的三个合法取值
mode 是只读属性,但可通过赋值修改(浏览器会验证并接受有效值)。它的可选值来自 TextTrack 构造函数的静态常量:
-
TextTrack.SHOWING:强制显示该轨道内容(即使用户未手动开启),常用于默认启用的字幕 -
TextTrack.HIDDEN:隐藏轨道内容,但仍保留在轨道列表中,可被脚本或用户界面访问 -
TextTrack.DISABLED:完全禁用该轨道,不渲染、不触发事件、不参与自动选择逻辑(例如语言匹配)
如何获取并设置某个字幕轨道的 mode
通常需先通过 元素的 textTracks 集合找到目标轨道(例如按 kind、language 或索引),再设置其 mode:
const video = document.querySelector('video');
// 获取第一个字幕轨道(kind === 'subtitles')
const track = Array.from(video.textTracks).find(t => t.kind === 'subtitles');
if (track) {
track.mode = 'showing'; // 也可写为 TextTrack.SHOWING(推荐,语义清晰)
}
注意:track.mode = 'showing' 是合法字符串赋值,但使用 TextTrack.SHOWING 更安全,避免拼写错误。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
常见使用场景与注意事项
- 用户点击“开启字幕”按钮时,应设为
TextTrack.SHOWING;关闭时设为TextTrack.DISABLED(而非HIDDEN),避免干扰自动语言匹配 -
HIDDEN多用于临时隐藏但保留上下文(如画中画模式下暂隐字幕),此时轨道仍响应cuechange事件 - 多个字幕轨道同时设为
SHOWING时,浏览器通常只显示一个(按优先级或最后设置生效),建议确保同一时间仅一个subtitles轨道处于SHOWING - 设置
mode前请确认轨道已加载(readyState >= TextTrack.LOADING),否则可能无效
配合 track 标签和 JavaScript 的完整示例
HTML 中声明字幕轨道:
<video controls><source src="movie.mp4"><track kind="subtitles" label="中文" srclang="zh" src="zh.vtt" default><track kind="subtitles" label="English" srclang="en" src="en.vtt"></track></track></source></video>
JS 控制显示/隐藏:
const video = document.querySelector('video');
const zhTrack = video.textTracks[0]; // 默认中文轨
// 显示中文
zhTrack.mode = TextTrack.SHOWING;
// 隐藏所有字幕(遍历设置为 DISABLED)
for (let t of video.textTracks) {
if (t.kind === 'subtitles') t.mode = TextTrack.DISABLED;
}
不复杂但容易忽略:mode 控制的是单个轨道的状态,不是整个视频的字幕开关;多语言支持需结合 srclang 和用户偏好自动匹配逻辑。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










