拖拽进度条核心是将鼠标位置映射为时间轴比例：点击时用clientx与容器rect计算比例并赋值currenttime；拖拽需mousedown/mousemove/mouseup三事件联动，同步更新ui；须监听loadedmetadata确保duration就绪，并校验duration有效性。
拖拽进度条时，关键不是“算时间”，而是把鼠标位置准确映射到视频时间轴上。核心在于获取点击/拖动点在进度条容器内的相对位置比例，再乘以总时长。
点击跳转：用 clientX 和容器边界算比例
监听进度条容器的 click 事件，通过 e.clientX - rect.left 得到鼠标距容器左边缘的像素距离，除以容器总宽度，就得到 0–1 的播放比例：
- 先调用
progressContainer.getBoundingClientRect()获取容器在视口中的位置和尺寸 - 计算比例：
const ratio = (e.clientX - rect.left) / rect.width - 再换算成时间：
video.currentTime = ratio * video.duration - 务必确保
video.duration已就绪（监听loadedmetadata后再绑定 click）
拖拽过程：mousedown + mousemove + mouseup 三步联动
单纯点击不够流畅，用户需要按住拖动。这需要三个事件配合，并临时暂停视觉干扰：
-
mousedown：记录起始状态，设置标志位（如
isDragging = true），可选暂停视频 -
mousemove：持续计算当前鼠标位置对应的时间值，直接赋给
video.currentTime；同时暂停timeupdate的进度条更新，避免抖动 -
mouseup：清除标志位，恢复
timeupdate监听，让进度条重新由播放逻辑驱动 - 注意移动端要同时监听
touchstart/touchmove/touchend，并阻止默认行为
精度保障：避开 duration 为 0 或 NaN 的坑
刚加载时 video.duration 是 NaN 或 0，直接运算会出错。所有涉及 duration 的计算都必须加保护：
- 在
loadedmetadata或canplay事件后才启用拖拽逻辑 - 每次计算前检查：
if (!video.duration || isNaN(video.duration)) return - 拖拽中若遇到 duration 异常，应忽略本次操作，不触发跳转
视觉同步：拖拽时也要更新进度条显示
用户拖动过程中，自定义进度条的填充宽度必须实时跟随，否则会产生“手移了但条没动”的错觉：
- 在
mousemove处理函数里，同步更新.progress-fill的width样式 - 宽度值 =
(currentX - rect.left) / rect.width * 100 + '%'，不依赖currentTime - 这样即使视频尚未响应 currentTime 设置（比如还在 buffering），UI 依然跟手
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
