通过监听timeupdate事件可实时计算视频进度百分比并更新DOM，需确保元数据加载完成后再绑定，处理duration为0或NaN的情况，并结合click/mousemove实现拖拽跳转，注意移动端兼容性与性能优化。
通过监听 timeupdate 事件，获取视频当前播放时间（video.currentTime）与总时长（video.duration），即可实时计算进度条的百分比位置并更新 DOM。
监听 timeupdate 事件并计算进度百分比
timeupdate 会在视频播放过程中频繁触发（通常每 200–250ms 一次）。需确保视频已加载元数据（loadedmetadata 或 canplay 后再绑定），避免初始时 duration 为 NaN：
- 用
video.addEventListener('timeupdate', handler)绑定处理函数 - 在 handler 中计算：
const percent = (video.currentTime / video.duration) * 100 - 注意：首次触发时
duration可能仍为 0，建议加判断if (video.duration && !isNaN(video.duration))
更新自定义进度条的视觉表现
假设你用一个 <div class="progress-bar"><div class="progress-fill"></div></div> 模拟进度条：
- 将
percent赋给.progress-fill的width样式（如fill.style.width = percent + '%'） - 若使用 CSS 变量控制，可设
bar.style.setProperty('--progress', percent)，再在 CSS 中写width: calc(var(--progress) * 1%); - 为提升性能，避免直接操作 style，推荐用
requestAnimationFrame批量更新（尤其在高频率触发时）
同步拖拽交互：点击进度条跳转时间
仅靠 timeupdate 只能“读取”进度；要支持用户拖动，则需额外处理点击/拖拽逻辑：
立即学习“前端免费学习笔记（深入）”；
- 监听进度条容器的
click：根据鼠标位置算出比例，设置video.currentTime = percentClick * video.duration - 监听
mousedown+mousemove实现拖拽，同时临时暂停视频（可选），并在mouseup后恢复播放 - 拖拽中应禁用默认的
timeupdate更新（或忽略它），避免视觉抖动；松手后再让timeupdate自然接管
注意事项与常见问题
实际开发中容易忽略的关键点：
-
timeupdate不保证帧级精度，也不在静音/暂停时触发；不要依赖它做音频波形同步等高精度场景 - 移动端 Safari 对
timeupdate触发频率更保守，可能延迟数百毫秒，需做好容错（如结合seeking/seeked） - 若视频是流媒体（如 HLS），
duration可能为Infinity（直播），此时需改用buffered范围计算已加载进度 - 更新 DOM 前建议节流（如用
setTimeout防止过快重绘），尤其在低性能设备上
