track元素无innerHTML，字幕由TextTrack对象管理；需通过video.textTracks获取TextTrack列表，检查readyState为LOADED后读取track.cues中的VTTCue文本内容。
track元素本身没有innerHTML，不能直接读取字幕文本
浏览器不会把<track></track>标签里的字幕内容解析成DOM子节点，它只是个元数据容器。你看到的字幕是Video/Audio播放器在渲染层动态叠加的，和<div>里放文字完全不同。
<p>真正能访问到字幕内容的唯一入口是<code>TextTrack对象——它由<track></track>触发生成，但和HTML结构无关。
通过video.textTracks获取TextTrack列表并监听变化
textTracks是只读属性，返回TextTrackList，里面每个项都是TextTrack对象。注意：track必须已加载且readyState >= TextTrack.LOADING才能读取内容。
- 用
video.textTracks[0]或video.textTracks.getTrackById("my-track")拿到目标轨道 - 监听
video.textTracks.onaddtrack捕获动态添加的track（比如JS后期插入） - 检查
track.readyState === TextTrack.LOADED再继续，否则track.cues为空
从TextTrack.cues读取cue对象，而不是直接读HTML
track.cues是一个TextTrackCueList，里面是VTTRegion或VTTCue实例（取决于格式），每个cue包含startTime、endTime和text字段。
立即学习“前端免费学习笔记（深入）”；
const track = video.textTracks[0];
if (track && track.readyState === TextTrack.LOADED) {
for (let i = 0; i < track.cues.length; i++) {
console.log(track.cues[i].text); // 这才是真正的字幕文本
}
}
别试图用track.innerHTML或track.textContent——它们永远是空字符串。
WebVTT文件需同源或配CORS，否则cues始终为空
即使<track src="sub.vtt"></track>写对了，如果服务器没返回Access-Control-Allow-Origin头，浏览器会静默失败：track.readyState卡在TextTrack.LOADING，cues.length为0，也不抛错。
- 本地开发时Chrome会直接拒绝file://协议下的VTT加载，必须起HTTP服务
- 用
fetch("sub.vtt")手动加载并解析，可以绕过限制，但要自己处理时间轴和格式（不推荐） - 检查Network面板里VTT请求是否200，Response是否可见，这是最常被忽略的环节
真正难的不是怎么读，而是怎么确认track已经就绪、内容已载入、且没被跨域拦住——这三个条件缺一不可。
