js视频时间条控件

您可以使用HTML5的`<video>`标签结合JavaScript来实现视频时间条控件。以下是一个基本的例子：

HTML代码：

<video id="myVideo" width="320" height="240">
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<div id="progressBar">
  <div id="progress"></div>
</div>

CSS代码：

#progressBar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
}

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

JavaScript代码：

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

function updateProgressBar() {
  var percentage = (video.currentTime / video.duration) * 100;
  progressBar.style.width = percentage + "%";
}

video.addEventListener('timeupdate', updateProgressBar);

在上面的代码中，我们首先获取了`<video>`标签和进度条（一个`<div>`标签）。然后我们定义了一个名为`updateProgressBar`的函数，该函数根据视频当前时间和总时间计算出进度条应该显示的百分比，然后将进度条的宽度设置为该百分比。最后，我们将`updateProgressBar`函数注册到`<video>`标签的`timeupdate`事件上，以便在视频播放过程中不断更新进度条。

您可以根据自己的需求对上述代码进行修改和扩展，例如添加拖拽功能或显示当前播放时间等。