元素不支持字幕关键词检索，需用JavaScript手动fetch并解析WebVTT文件，构建时间戳索引，再通过video.currentTime跳转匹配项。
track 元素本身不支持字幕快速检索
直接用 <track></track> 标签无法实现“按关键词跳转到某句字幕”这类检索功能。它只是把字幕文件（如 WebVTT）挂载到 <video></video> 上，供浏览器渲染显示，不提供索引、查询或 DOM 暴露能力。所有“检索”逻辑必须自己实现。
真正能检索的是 WebVTT 文件内容 + JavaScript 解析
浏览器加载 <track kind="subtitles"></track> 后，并不会把字幕文本暴露成可遍历的 JS 对象。想做检索，得另起炉灶：
- 用
fetch()单独请求同一份 .vtt 文件（注意跨域） - 手动解析 WebVTT 格式：提取每段的
start time、end time和text - 构建内存索引（比如用
Array） - 对
text字段做includes()或正则匹配，返回匹配项的时间戳
示例片段（简化版解析）：
fetch('sub.vtt')
.then(r => r.text())
.then(vtt => {
const cues = [];
const lines = vtt.split('\n');
for (let i = 0; i < lines.length; i++) {
if (/^\d{2}:\d{2}:\d{2}\.\d{3} --> \d{2}:\d{2}:\d{2}\.\d{3}$/.test(lines[i])) {
const [start, end] = lines[i].split(' --> ').map(t => timeToSeconds(t.trim()));
const text = lines[i + 1] || '';
cues.push({ start, end, text });
}
}
// 现在 cues 可以被搜索了
});
检索后跳转视频需调用 video.currentTime
拿到匹配字幕的时间点（比如 cues[5].start），不能靠 <track></track> 自动跳转，必须显式控制视频播放器：
立即学习“前端免费学习笔记（深入）”；
- 确保
<video></video>元素有id或已绑定到变量（如const vid = document.querySelector('video')） - 设置
vid.currentTime = matchedCue.start - 建议加
vid.play().catch(e => console.warn('autoplay prevented'))尝试恢复播放 - 注意：部分浏览器对自动播放有限制，用户未交互前可能静音或暂停
容易忽略的兼容性与性能坑
WebVTT 解析看似简单，但真实字幕文件常含注释、样式标签（<b></b>、<v></v>）、多行 cue、空 cue，直接按换行切会出错：
- 别用
split('\n')粗暴解析；用状态机或现成库如@lynebot/vtt-parser更稳 - 大文件（>10MB）在低端设备上
fetch + parse可能卡顿，考虑分片加载或预解析缓存 -
<track></track>的srclang和label不参与检索——它们只影响用户菜单显示，检索逻辑完全独立 - 时间格式不只有
HH:MM:SS.mmm，还可能有MM:SS.mmm，解析函数必须容错
真正的难点不在“怎么挂 track”，而在于绕过它的封装，亲手把字幕变成可查、可跳、可响应的数据结构。
