不能自动绑定音视频时间轴，需用 JavaScript 监听 timeupdate 事件手动比对时间点并切换样式；推荐优先使用 + WebVTT 实现原生字幕同步，兼容现代浏览器，IE11 需降级为 JS 模拟。
HTML5 <mark></mark> 不能直接绑定时间轴，得靠 JS 手动同步
<mark></mark> 只是语义化高亮文本，浏览器不会自动把它和音视频播放进度挂钩。想实现“播到某句时高亮对应文字”，必须监听 timeupdate 事件，手动比对当前时间与预设的时间点，再切换 <mark></mark> 的 class 或样式。
- 常见错误现象：
<mark data-start="2.5" data-end="4.1">这句话</mark>写了但完全没反应——因为 HTML 不解析这些自定义属性 - 使用场景：字幕同步、课程讲解逐句标注、播客文稿重点跳转
- 关键参数差异：
video.currentTime返回秒数（浮点），需用Math.abs()判断是否落在区间内，容差建议设为0.1秒避免抖动
用 <track></track> + WebVTT 是更稳的字幕级标注方案
如果重点是“随时间出现/消失”的文本块（比如字幕、解说词），<track></track> 标签配合 WebVTT 文件才是原生支持的路径。浏览器自动处理加载、解析、渲染、时间对齐，不用自己写定时器。
- 容易踩的坑：WebVTT 文件必须以
WEBVTT开头，且换行严格（空行分隔 cue，时间格式为00:00:02.500 --> 00:00:04.100） - 性能影响：单个
<track></track>加载不阻塞页面，但大量 track（>5 条）可能增加解析开销；建议用kind="metadata"存非视觉数据，kind="subtitles"存可见文本 - 兼容性：所有现代浏览器都支持，但 IE11 及以下不支持
<track></track>渲染，需降级为 JS 模拟
手动同步时，别用 setInterval 监听播放进度
timeupdate 事件本身已由浏览器按帧率触发（通常 4–60Hz），足够响应。用 setInterval 反而引入延迟、重复触发或漏帧风险。
- 正确做法：在
video.addEventListener('timeupdate', handler)里做判断，每次只处理当前时间点 - 为什么这样做：浏览器会根据实际播放节奏调整
timeupdate频率，比如卡顿时自动降频；而setInterval(100)强制每 100ms 跑一次，可能刚算完上一帧就又来一遍 - 示例逻辑：
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); }); });
CSS 里用 :not(.active) > mark 控制未激活状态更可靠
别依赖 JS 反复增删 <mark></mark> 标签——DOM 操作成本高，还容易和用户手动选中文本冲突。推荐把 <mark></mark> 保留在 HTML 中，用 CSS 控制显隐。
立即学习“前端免费学习笔记（深入）”；
- 使用场景：需要保留原始文本结构、支持复制带格式内容、避免 JS 失效后完全不可读
- 参数差异：
mark { opacity: 0.3; }+.active mark { opacity: 1; }比display: none更平滑，且不影响行高布局 - 容易踩的坑：直接写
mark:not(.active)无效，因为<mark></mark>本身没 class；必须在外层容器加.active，再用后代选择器控制
时间轴标注真正的复杂点不在怎么标，而在怎么让多个时间点不互相打架——比如一句长文本跨 3 秒，中间插入一个 0.2 秒的术语解释，这时候高亮逻辑就得支持嵌套或优先级判定，而不是简单按顺序覆盖。
