video标签去进度条

您可以使用HTML5的`<video>`标签和CSS来创建一个带有进度条的视频播放器。以下是一个示例代码：

HTML部分：

<div class="video-container">
  <video id="my-video" controls>
    <source src="your-video-file.mp4" type="video/mp4">
    <!-- 添加其他视频格式的<source>标签，以提供兼容性 -->
  </video>
  <div id="progress-bar">
    <div id="progress"></div>
 </div>
</div>

CSS部分：

.video-container {
  position: relative;
}

#progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

#progress {
  height: 100%;
  background-color: #4CAF50;
  width: 0%;
}

JavaScript部分：

var video = document.getElementById("my-video");
var progressBar = document.getElementById("progress");

video.addEventListener("timeupdate", function() {
  // 计算当前播放进度百分比
  var progressValue = (video.currentTime / video.duration) * 100;
  
  // 更新进度条宽度
  progressBar.style.width = progressValue + "%";
});

这段代码会在视频播放器下方创建一个进度条，当视频播放时，进度条会根据当前播放的位置自动更新。您可以根据需要自定义样式，并根据视频文件的URL修改`<source>`标签中的`src`属性来指定您自己的视频文件。