video标签进自定义进度条

要实现自定义进度条，您可以使用以下步骤：

1. 在HTML中添加一个video标签，并为其指定一个ID，例如：`<video id="myVideo">...</video>`

2. 使用CSS样式定义进度条的外观，例如：

#myVideo::-webkit-media-controls-timeline {
  height: 5px;
  background-color: gray;
}
#myVideo::-webkit-media-controls-play-button {
  display: none;
}
#myVideo::-webkit-media-controls-current-time-display {
  display: none;
}

这些样式将隐藏默认的播放按钮和当前时间显示，以及定义进度条的高度和背景颜色。

3. 使用JavaScript获取video元素并添加事件监听器，例如：

const video = document.getElementById('myVideo');
video.addEventListener('timeupdate', updateProgressBar);

这将监听视频的时间更新事件，并调用`updateProgressBar`函数。

4. 实现`updateProgressBar`函数，它将更新进度条的宽度，例如：

function updateProgressBar() {
  const progressBar = document.querySelector('#myVideo::-webkit-media-controls-timeline');
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${progress}%`;
}

这将计算当前视频播放的百分比，并将进度条的宽度设置为该百分比。

这样，您就可以实现一个自定义的视频进度条了。如果需要更多的自定义，您可以使用JavaScript和CSS进一步修改进度条的外观和行为。