如果是video的音量控制呢？

如果要实现video元素的音量控制条，可以使用类似的方法。以下是一个示例代码：

HTML代码：

<video src="your_video_file.mp4" id="myVideo"></video>

<div id="volumeWrapper">
  <div id="volumeBar"></div>
</div>

CSS代码：

#volumeWrapper {
  width: 200px;
  height: 10px;
  background-color: #ccc;
}

#volumeBar {
  width: 100px;
  height: 10px;
  background-color: #000;
}

JavaScript代码：

var video = document.getElementById("myVideo");
var volumeWrapper = document.getElementById("volumeWrapper");
var volumeBar = document.getElementById("volumeBar");

volumeWrapper.addEventListener("mousedown", function(e) {
  var x = e.pageX - volumeWrapper.offsetLeft;
  var volume = x / volumeWrapper.offsetWidth;
  video.volume = volume;
  volumeBar.style.width = (volume * 100) + "%";

  volumeWrapper.addEventListener("mousemove", function(e) {
    var x = e.pageX - volumeWrapper.offsetLeft;
    var volume = x / volumeWrapper.offsetWidth;
    video.volume = volume;
    volumeBar.style.width = (volume * 100) + "%";
  });
});

volumeWrapper.addEventListener("mouseup", function(e) {
  volumeWrapper.removeEventListener("mousemove");
});

这段代码与之前的音频控制条代码类似，但是将audio元素替换为video元素，其余部分保持不变。同样，可以使用CSS样式来自定义音量控制条的外观。