js实现拖拽视频进度条

在JavaScript中实现拖动视频播放进度条通常涉及到HTML5的`range`元素和媒体元素（如`<video>`）。下面是一个简单的步骤描述：

1. **创建HTML结构**：

   <input type="range" id="progress-bar" min="0" max="100" value="0">
   <video id="my-video" controls></video>

2. **获取DOM元素**：

   const progressBar = document.getElementById('progress-bar');
   const videoElement = document.getElementById('my-video');

3. **添加事件监听**：
- 鼠标按下开始拖动：

   progressBar.addEventListener('mousedown', function(e) {
     const initialProgress = e.target.value;
     e.target.onmousemove = handleDrag;
     e.target.onmouseup = resetEventHandlers;
   });

- 拖动过程中的更新进度：

   function handleDrag(event) {
     videoElement.currentTime = event.target.value / 100 * videoElement.duration;
   }

4. **鼠标释放结束拖动**：

   function resetEventHandlers() {
     e.target.onmousemove = null;
     e.target.onmouseup = null;
   }

5. **支持拖动到视频结束位置**：
如果想要允许用户将进度条拖动到视频的结束处，可以在`handleDrag`函数中检查是否超过了总时长：

   function handleDrag(event) {
     if (event.target.value > videoElement.duration) {
       event.target.value = videoElement.duration;
     } else {
       videoElement.currentTime = event.target.value / 100 * videoElement.duration;
     }
   }