<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"，否则多个字幕可能重叠显示
kind="metadata" 的实际支持、以及移动端 Safari 对字幕按钮的隐藏逻辑，这些细节在开发后期才容易暴露——尤其当字幕在桌面正常、手机上消失时，大概率不是代码问题，而是 iOS 的 UI 策略限制。 
