HTML中track字幕轨道：HTML中track标签给视频加字幕

<track>标签必须位于<video>内部且紧贴<source>之后或所有<source>之前，否则字幕不加载；需确保srclang合法、VTT文件首行为WEBVTT、MIME类型正确，并用::cue伪类控制样式。

track 标签必须写在 video 内部且紧贴 source 之后

浏览器只认 <track> 在 <video> 开始标签和第一个 <source>（或直接视频 src）之间，或者所有 <source> 之后、</video> 之前。放错位置（比如塞进 <div> 里，或写在 </video> 外面）会导致字幕完全不加载，控制台也几乎不报错。

常见错误写法：
<video><source src="a.mp4"></video><track kind="subtitles" srclang="zh" src="a.vtt">
正确顺序示例：

<video controls>  <source src="a.mp4" type="video/mp4">  <track kind="subtitles" label="中文" srclang="zh" src="a.vtt" default></video>

• kind="subtitles" 是最常用类型；若用 kind="captions"，需注意它默认包含音效描述，部分播放器对样式支持更弱
• srclang 必须是合法 BCP 47 语言码（如 "zh"、"en-US"），写成 "chinese" 或空值会导致轨道被忽略
• default 属性只允许一个轨道拥有，否则浏览器行为未定义（多数只启用第一个带 default 的）

VTT 文件路径和 MIME 类型必须匹配

浏览器加载 <track src="..."> 时，会发起独立 HTTP 请求。如果返回 404、跨域（CORS）、或服务端没返回 text/vtt MIME 类型，字幕就静默失败——播放器界面可能显示“字幕”按钮，但点开为空白列表。

• 本地开发用 file:// 协议时，<track> 几乎必然失效（Chrome/Firefox 均禁用 file:// 下的跨文件请求），必须起本地服务（如 python3 -m http.server）
• VTT 文件首行必须是 WEBVTT（全大写，无空格，无 BOM），否则解析失败，连带整条轨道被丢弃
• 时间戳格式严格： 00:00:01.234 --> 00:00:03.456，毫秒位必须三位，不能写成 .23 或 .2345

字幕样式无法用普通 CSS 直接选中 ::cue

浏览器把字幕渲染为影子 DOM 中的伪元素，只能通过 ::cue 和 ::cue-region 伪类控制样式。直接写 p { color: red } 或给 <track> 加 class 完全无效。

• 必须用 video::cue 或全局 ::cue（后者影响所有 track）
• 支持的 CSS 属性有限：仅 color、opacity、font-size、font-family、text-shadow、background 等少数几个；display、margin、transform 均不生效
• 若要居中文字，别试 text-align: center —— 它只对单行有效；多行字幕靠 video::cue { text-align: center } 可以，但换行逻辑由浏览器控制，无法强制

JavaScript 动态切换字幕轨道要注意 readyState

用 JS 控制 video.textTracks 时，不能一拿到 track 就设 mode = "showing"。新加载的 track 初始 readyState 是 0（TextTrack.NONE），需监听 load 事件或轮询 readyState === 2（TextTrack.LOADED）后再操作，否则设置无效。

立即学习“前端免费学习笔记（深入）”；

• 获取轨道后立即执行 track.mode = "showing"，大概率失败；应监听 track.onload = () => { track.mode = "showing"; }
• textTracks 是实时集合，但 addTextTrack() 创建的轨道不会自动加载外部 VTT，它只适用于内联字幕（即用 track.addCue() 手动加）
• 切换语言时，记得先设其他轨道 mode = "disabled"，否则多个字幕可能重叠显示

VTT 时间轴精度、浏览器对 kind="metadata" 的实际支持、以及移动端 Safari 对字幕按钮的隐藏逻辑，这些细节在开发后期才容易暴露——尤其当字幕在桌面正常、手机上消失时，大概率不是代码问题，而是 iOS 的 UI 策略限制。