video标签自定义进度条点击

HTML5 中的 `<video>` 标签允许开发者创建交互式视频播放器，其中自定义进度条是一个常见的需求。你可以通过JavaScript来实现这个功能。以下是基本步骤：

1. 首先，在HTML中添加一个范围输入元素作为进度条，例如：

   <input type="range" id="progress-bar" min="0" max="100">

2. 使用 JavaScript 获取这个输入元素，并绑定`change`事件到它，当用户拖动进度滑块时，会触发事件处理函数：

   const progressBar = document.getElementById('progress-bar');
   progressBar.addEventListener('change', function() {
       const progressValue = this.value;
       // 更新视频播放位置
       video.currentTime = progressValue / 100; // 如果你的进度百分比和时间是对应的关系
   });

3. 然后，你需要获取`<video>`元素并将其引用存储在一个变量中，比如`video`:

   const video = document.getElementById('my-video');

4. 当你想在用户点击进度条时立即跳转到相应位置，可以在`addEventListener`回调里加入点击事件，比如`click`：

   progressBar.addEventListener('click', function(e) {
       const clientX = e.clientX - progressBar.offsetLeft; // 获取鼠标点击点相对于进度条的位置
       const percentage = (clientX / progressBar.offsetWidth) * 100; // 计算对应的百分比
       video.currentTime = percentage;
   });

记得在实际项目中，需要处理兼容性和错误处理，比如检查`video`是否存在、是否支持`currentTime`属性等。