video如何更改原生进度条位置

如果你想更改HTML5 video标签的原生进度条位置，可以通过CSS样式来实现。以下是一种实现方法：

1. 隐藏原生进度条：

video::-webkit-media-controls {
  display:none !important;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

video::-webkit-media-controls-panel {
  display:none !important;
}

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  display:none !important;
}

这段代码将隐藏原生进度条和时间显示。

2. 创建自定义进度条：

#progress-bar {
  position:relative;
  height:8px;
  width:100%;
  background-color:#ddd;
}

#progress {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  background-color:#ff0000;
  width:0%;
}

这段代码将创建一个自定义进度条，具体样式可以根据需要进行修改。其中，#progress是进度条的实际进度，通过改变它的宽度来控制进度条的进度。

3. 使用JavaScript代码来控制进度条位置：

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

video.addEventListener("timeupdate", function() {
  var percent = video.currentTime / video.duration;
  progress.style.width = percent * 100 + "%";
});

progressBar.addEventListener("click", function(e) {
  var pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
  video.currentTime = pos * video.duration;
});

这段代码将监听视频的timeupdate事件，每当视频播放时间更新时，计算出视频播放的进度百分比，并将进度条的宽度设置为该百分比。同时，还可以为进度条添加一个点击事件，使用户可以通过点击进度条来控制视频的播放位置。

希望这能帮到你！