HTML中mark标签无法自动绑定字幕时间轴，必须用track+WebVTT实现原生同步；手动同步需监听timeupdate事件并设容差比对，禁用setInterval。
HTML里标签不能自动绑定字幕时间轴
mark只是语义化高亮，浏览器完全不认它的 data-start 或 data-end 属性。写成 <mark data-start="2.5" data-end="4.1">这句话</mark>，页面上不会有任何时间响应——这些自定义属性纯属摆设，HTML 解析器直接忽略。
真正能和音视频播放进度联动的，只有 timeupdate 事件 + 手动比对逻辑。你得自己监听、判断、切换样式，没有捷径。
用track + WebVTT 是唯一原生支持字幕时间同步的方案
如果目标是“某段文字随音视频精确出现/消失”，必须用 <track></track> 标签加载 WebVTT 文件。这是 HTML5 原生机制，浏览器自动解析时间码、对齐播放、渲染文本，不用写一行定时逻辑。
关键点：
立即学习“前端免费学习笔记（深入）”；
- WebVTT 文件必须以
WEBVTT开头，且第一行不能有空格或 BOM - 时间格式严格为
00:00:02.500 --> 00:00:04.100（毫秒级，双横线中间有空格） -
<track kind="subtitles" src="captions.vtt" srclang="zh"></track>必须加kind和srclang，否则可能不生效 - 多个
track时，避免超过 5 条，否则解析开销明显上升
手动同步时，别用setInterval监听播放进度
timeupdate 事件本身已由浏览器按实际帧率触发（通常 4–60Hz），足够灵敏。用 setInterval(() => { ... }, 100) 反而会引入三类问题：
- 播放卡顿时，
setInterval照常执行，导致重复判断或样式错乱 - 高频触发（如设成 50ms）在低端设备上造成明显 CPU 压力
- 错过关键帧：浏览器可能跳过某些
timeupdate，但setInterval强制补帧，结果反而更不准
正确写法只有一句：video.addEventListener('timeupdate', () => { /* 比对当前 time.currentTime 和预设区间 */ })。
手动比对时间点要注意浮点误差和容差设置
video.currentTime 返回的是浮点数（如 2.5000000000000004），直接用 === 判断必然失败。必须用区间容差。
示例逻辑：
video.addEventListener('timeupdate', () => {
const t = video.currentTime;
document.querySelectorAll('[data-start]').forEach(el => {
const start = parseFloat(el.dataset.start);
const end = parseFloat(el.dataset.end);
el.classList.toggle('active', t >= start - 0.1 && t <= end + 0.1);
});
});容差设为 0.1 秒是经验阈值：小了容易因浮点抖动漏触发，大了会导致高亮提前/延后太明显。别用 Math.round(t) 或 toFixed(1)，它们会掩盖真实时间偏移。
真正难的不是写几行 JS，而是把时间点数据从音频剪辑工具里准确导出、清洗、嵌入 DOM，并保证每个 data-start/data-end 都经过人工校验——机器生成的时间戳常有 ±0.3 秒偏差，靠代码容差兜不住。
