track元素不支持onload事件，其加载状态需通过video的loadeddata或canplay事件间接判断，或用fetch手动加载并解析VTT文件。
track元素本身不支持onload事件
HTML的<track></track>标签是空元素，浏览器不会像<img alt="怎么在HTML代码中为track元素绑定加载完成事件" >或<script></script>那样触发load事件。直接写onload="..."或监听load事件完全无效——这是最常踩的坑。
真正加载字幕的时间点取决于视频播放器行为：浏览器只在需要渲染字幕时才解析VTT文件，且不暴露加载完成信号。
用video元素的loadeddata或canplay事件间接判断
虽然<track></track>没加载事件，但它的内容是否可用，通常和视频元数据加载完成强相关。此时可监听父<video></video>的loadeddata（首帧元数据就绪）或canplay（可开始播放）事件：
<video id="myVideo"> <source src="video.mp4"> <track kind="subtitles" label="English" srclang="en" src="sub.vtt" default> </video>
然后在JS中：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const video = document.getElementById('myVideo');
video.addEventListener('loadeddata', () => {
// 此时track已解析，TextTrackList里能拿到有效TextTrack对象
const track = video.textTracks[0];
if (track && track.kind === 'subtitles') {
console.log('track loaded, mode:', track.mode); // 可能是 'disabled'、'hidden' 或 'showing'
}
});
-
loadeddata比canplay更早触发，适合做初始化； - 注意
textTracks返回的是TextTrackList，不是实时更新的数组，需用getTrackById()或遍历索引访问； - 即使事件触发，
track.mode默认是'disabled'，需手动设为'showing'才能显示字幕。
检测VTT文件是否真被加载成功？得靠fetch + 手动解析
如果必须确认VTT内容已下载并语法合法（比如容错处理或 fallback），不能依赖video事件——因为浏览器可能缓存失败、静默忽略404，或加载了但格式错误。
稳妥做法是用fetch提前拉取VTT，再手动创建TextTrack：
async function loadTrack(video, vttUrl) {
try {
const res = await fetch(vttUrl);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const vttText = await res.text();
// 验证基础格式（比如是否以WEBVTT开头）
if (!vttText.trim().startsWith('WEBVTT')) {
throw new Error('Invalid VTT format');
}
const track = video.addTextTrack('subtitles', 'English', 'en');
// 注意：addTextTrack返回的track无法直接设置src，需用VTTCue等API逐条添加
// 实际项目中建议用库如vtt.js解析后注入
} catch (err) {
console.error('Track load failed:', err);
}
}
-
video.addTextTrack()创建的是空track，不触发网络请求； - 浏览器原生不提供“解析VTT字符串到cue”的API，必须用第三方库（如
vtt.js）或自己实现简易解析； - 手动加载绕过了浏览器的自动加载逻辑，意味着你要自己管理启用/禁用、语言切换等状态。
监听textTracks.length变化不可靠
有人试图用MutationObserver监听<video></video>子节点变化，或轮询video.textTracks.length——这在多数情况下无效。因为<track></track>是HTML解析阶段就注册进textTracks的，不是动态插入后才出现。
也就是说：<track src="x.vtt"></track>写在HTML里，video.textTracks[0]在DOM ready时就存在了，哪怕VTT文件404或根本没响应，它也在列表里，只是mode为'disabled'且cues为空。
所以别指望靠长度变化判断“加载完成”，重点始终是：内容是否可用，而不是标签是否存在。
