html video 进度条

HTML5的video标签自带进度条，可以通过CSS样式来自定义样式。以下是一个简单的示例代码，其中进度条的样式使用了CSS的伪元素：

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<style>
  /* 进度条容器 */
  .progress-bar {
    position: relative;
    height: 10px;
    background-color: #f2f2f2;
    border-radius: 5px;
  }

  /* 进度条 */
  .progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #007bff;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
  }

  /* 将进度条的宽度设置为当前播放时间占总时间的比例 */
  video::-webkit-media-controls-timeline-progress-bar {
    background-color: transparent;
  }

  video::-webkit-media-controls-timeline-progress-bar::-webkit-media-controls-timeline-progress-bar-value {
    background-color: #007bff;
  }
</style>

在CSS中，我们定义了一个`.progress-bar`类作为进度条的容器，并使用伪元素`::before`来表示进度条。我们通过`position`属性将伪元素定位在容器的左上角，然后设置`height`、`background-color`和`border-radius`属性来样式化进度条的外观。最后，我们使用`transition`属性来定义进度条的动画效果。

为了让进度条与视频的播放状态同步，我们需要动态地设置伪元素的宽度，使其等于当前播放时间占总时间的比例。这可以通过JavaScript来实现，例如：

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

video.addEventListener('timeupdate', function() {
  const progress = video.currentTime / video.duration;
  progressBar.querySelector('::before').style.width = `${progress * 100}%`;
});

在这段代码中，我们使用`timeupdate`事件来监听视频的播放进度，然后计算出当前播放时间占总时间的比例，并将进度条的宽度设置为该比例的百分比。注意，我们使用了`querySelector`方法和CSS选择器来获取进度条的伪元素。

另外，我们还需要调整浏览器自带的进度条样式，使其不显示或者与自定义样式保持一致。以上面的示例代码为例，我们可以通过以下CSS样式来实现：

/* 隐藏浏览器自带的进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}

/* 将进度条的宽度设置为当前播放时间占总时间的比例 */
video::-webkit-media-controls-timeline-progress-bar {
  background-color: transparent;
}

video::-webkit-media-controls-timeline-progress-bar::-webkit-media-controls-timeline-progress-bar-value {
  background-color: #007bff;
}

这些样式将浏览器自带的进度条隐藏，并将自定义进度条的样式应用到了`::-webkit-media-controls-timeline-progress-bar`和`::-webkit-media-controls-timeline-progress-bar-value`选择器上。注意，这些样式只适用于WebKit内核的浏览器，其他浏览器可能需要使用不同的样式。