自定义进度条 video

要自定义进度条，你可以使用 HTML5 的 `<video>` 元素和 CSS3 的样式来实现。

首先，你需要创建一个 `<video>` 元素，然后通过 JavaScript 获取该元素并添加事件监听器，以便在视频播放期间更新进度条。

在 HTML 中，你可以这样创建一个带有进度条的视频播放器：

<div class="video-container">
  <video src="your-video.mp4"></video>
  <div class="progress-bar"></div>
</div>

接下来，你可以使用 CSS 来定义进度条的样式。例如：

.video-container {
  position: relative;
}

video {
  width: 100%;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #f00;
  transition: width 0.3s ease;
}

上述 CSS 代码中，我们将进度条设置为绝对定位，并使其位于视频播放器的底部。我们还定义了进度条的高度、背景颜色和过渡效果。

最后，你需要使用 JavaScript 来更新进度条的宽度。你可以在视频播放期间使用 `timeupdate` 事件来更新进度条的宽度，代码如下：

const video = document.querySelector('video');
const progressBar = document.querySelector('.progress-bar');

video.addEventListener('timeupdate', () => {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${percent}%`;
});

上述 JavaScript 代码中，我们获取了视频元素和进度条元素，并使用 `timeupdate` 事件来更新进度条的宽度。我们通过计算当前视频播放时间与总时间的比例来确定进度条的宽度。

以上就是自定义进度条视频播放器的基本方法。你可以根据自己的需求进行修改和优化。