HTML中mark标签无法自动绑定字幕时间轴，必须用track+WebVTT实现原生同步；手动同步需监听timeupdate事件并设容差比对，禁用setInterval。
HTML里标签不能自动绑定字幕时间轴
mark只是语义化高亮，浏览器完全不认它的 data-start 或 data-end 属性。写成 这句话，页面上不会有任何时间响应——这些自定义属性纯属摆设，HTML 解析器直接忽略。
真正能和音视频播放进度联动的，只有 timeupdate 事件 + 手动比对逻辑。你得自己监听、判断、切换样式，没有捷径。
用track + WebVTT 是唯一原生支持字幕时间同步的方案
如果目标是“某段文字随音视频精确出现/消失”，必须用 标签加载 WebVTT 文件。这是 HTML5 原生机制，浏览器自动解析时间码、对齐播放、渲染文本，不用写一行定时逻辑。
关键点：
- WebVTT 文件必须以
WEBVTT开头，且第一行不能有空格或 BOM - 时间格式严格为
00:00:02.500 --> 00:00:04.100（毫秒级，双横线中间有空格） -
必须加kind和srclang，否则可能不生效 - 多个
track时，避免超过 5 条，否则解析开销明显上升
手动同步时，别用setInterval监听播放进度
timeupdate 事件本身已由浏览器按实际帧率触发（通常 4–60Hz），足够灵敏。用 setInterval(() => { ... }, 100) 反而会引入三类问题：
- 播放卡顿时，
setInterval照常执行，导致重复判断或样式错乱 - 高频触发（如设成 50ms）在低端设备上造成明显 CPU 压力
- 错过关键帧：浏览器可能跳过某些
timeupdate，但setInterval强制补帧，结果反而更不准
正确写法只有一句：video.addEventListener('timeupdate', () => { /* 比对当前 time.currentTime 和预设区间 */ })。
手动比对时间点要注意浮点误差和容差设置
video.currentTime 返回的是浮点数（如 2.5000000000000004），直接用 === 判断必然失败。必须用区间容差。
示例逻辑：
0.1
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
