应通过 video.textTracks 遍历并设置 TextTrack.mode 控制字幕显示，mode="showing"才真正渲染；track.hidden 为只读，修改无效；需按 kind 分组筛选、检查 readyState===2 再启用，且 track 元素须为 video 直接子元素、位置正确、属性严格符合规范。

直接用 video.textTracks 遍历 + TextTrack.mode 控制，别碰 track.src 或 hidden 属性——那些不生效。

为什么不能直接操作 track 元素的 hidden 属性

track.hidden 是只读属性，改了也没用；浏览器是否显示字幕，完全取决于 TextTrack.mode 的值。常见错误是写 track.hidden = false 或 track.style.display = 'block'，结果字幕依然不出现。

• mode = "disabled"：默认值，轨道加载但不渲染、不触发事件
• mode = "hidden"：已加载、不渲染，但可响应 oncuechange（适合预加载+JS逻辑控制）
• mode = "showing"：唯一能真正显示字幕的模式，且会实时同步时间轴

如何安全切换同 kind 的字幕（比如所有 subtitles）

必须按 kind 分组筛选，再逐个设置 mode，否则可能多个字幕同时显示或全部关闭。浏览器允许不同 kind（如 subtitles 和 descriptions）共存并各自启用，但同一 kind 下应只有一条 "showing"。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 先用 Array.from(video.textTracks) 转成数组，避免类数组遍历时的坑
• 检查 track.kind === 'subtitles' 再操作，排除 captions/descriptions 干扰
• 切换前建议判断 track.readyState === 2（LOADED），避免未加载完成就设为 "showing" 导致静默失败
• 不要依赖 default 属性做逻辑分支——它只影响首次加载，用户手动切换后即失效

track 标签写错位置或缺属性，为什么没报错却不出现在菜单里

因为浏览器对 的解析是“静默失败”：错一位就整个轨道被丢弃，控制台零提示。最常踩的坑是这四个硬性条件没满足：

• 必须是 的**直接子元素**，且必须放在所有 之后、 之前
• kind="subtitles" 不能拼错、不能多空格、不能写成 caption 或 subtitles （末尾空格）
• srclang 必须是标准 BCP 47 码，如 zh-Hans、en-US，chinese 或 cn 无效
• 服务端返回 .vtt 文件时，MIME 类型必须是 text/vtt，不是 text/plain 或 application/octet-stream

WebVTT 文件本身也极其脆弱：首行不是顶格大写的 WEBVTT、毫秒位不是三位、文件带 BOM——任一条件不满足，整份字幕都不会进 textTracks 列表。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！