可通过video元素的textTracks属性获取所有字幕轨道，它返回TextTrackList对象，包含已声明或动态添加的文本轨道；需通过< track >标签或JS创建并追加track元素来动态加载外部字幕；筛选时应过滤kind为'subtitles'或'captions'的轨道。
可以通过视频元素的 textTracks 属性获取当前加载的所有字幕轨道（包括已启用、禁用、隐藏等状态的轨道），这是 HTML5 原生支持的标准方式。
获取所有字幕轨道（textTracks）
<video> 元素有一个只读属性 textTracks，它返回一个 TextTrackList 对象，内部包含所有已添加的文本轨道（如 WebVTT 字幕、章节、描述等）。注意：只有当字幕轨道已通过 <track> 标签声明或通过 JavaScript 动态添加并被浏览器解析后，才会出现在该列表中。
示例：
const video = document.getElementById('myVideo');
const tracks = video.textTracks; // TextTrackList 对象
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
console.log({
kind: track.kind, // 'subtitles', 'captions', 'descriptions', 'chapters', 'metadata'
label: track.label, // 用户可读名称，如 'English'
language: track.language,// 如 'en', 'zh'
mode: track.mode // 'disabled', 'hidden', 'showing'
});
}
监听轨道动态变化（addtrack / removetrack）
如果字幕是异步加载（例如通过 JS 动态创建 <track> 并 append 到 video），需监听 addtrack 事件，因为 textTracks 初始可能为空。
立即学习“Java免费学习笔记（深入）”；
video.addEventListener('addtrack', e => { console.log('新轨道加入:', e.track); });video.addEventListener('removetrack', e => { console.log('轨道移除:', e.track); });
⚠️ 注意：addtrack 是在 <track> 元素被插入且元数据解析完成后触发，不是 DOM 插入瞬间触发。
动态添加字幕轨道（JavaScript 方式）
若需运行时加载外部字幕（如从 URL 获取 .vtt 内容），不能直接用 JS 创建完整轨道 —— 必须通过 <track> 元素声明，并设置 src，由浏览器自动加载和解析：
- 创建
<track>元素，设好kind、label、src、srclang - 追加到
<video>中（顺序不影响，但建议在loadstart后或loadedmetadata前） - 浏览器会在准备就绪后将它加入
textTracks，并触发addtrack
示例：
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = 'Français';
track.srclang = 'fr';
track.src = '/subtitles/fr.vtt';
video.appendChild(track); // 触发 addtrack（稍后）
区分有效字幕轨道（过滤出可用的 subtitles/captions）
textTracks 可能包含非字幕类轨道（如 chapters 或 metadata），实际显示字幕通常只关心 kind 为 'subtitles' 或 'captions' 的轨道：
const subtitleTracks = Array.from(video.textTracks).filter(track =>
track.kind === 'subtitles' || track.kind === 'captions'
);
console.log('可用字幕轨道:', subtitleTracks);
还可进一步按 mode !== 'disabled' 筛选当前启用的轨道，或结合 language 实现语言切换逻辑。
