视频洗涤器拖动有问题

Question

我正在制作自定义视频播放器控件并从滑块开始，但是虽然我觉得我使用的方法是正确的，但在拖动滑块时似乎很紧张。不知道它有什么问题。所以我特意来这里看看有没有人看一下有没有发现什么不对的地方。

我当前的代码状态如下，谢谢。

var video = document.getElementById("vid");

function scrubber() {
 var scrubBar = document.getElementById("scrub_bar");

 video.addEventListener("timeupdate", forNoOne);

 function forNoOne() {
  var percent = video.currentTime / video.duration;

  document.getElementById("time").innerHTML = video.currentTime;
  document.getElementById("dur").innerHTML = video.duration;

  scrubBar.style.width = (percent * 100) + "%";
 }

 var drag = false;

 document.addEventListener("mousedown", function(e) {
  drag = true;
  updateScrubber(e.pageX);
 });

 document.addEventListener("mouseup", function(e) {
  if (drag) {
   drag = false;
   updateScrubber(e.pageX);
  }
 });

 document.addEventListener("mousemove", function(e) {
  if (drag) {
   updateScrubber(e.pageX);
  }
 });

 function updateScrubber(x) {
  var maxDuration = video.duration;
  var position = x - scrubBar.offsetLeft;
  var percentage = 100 * position / scrubBar.offsetWidth;

  if (percentage > 100) {
   percentage = 100;
  }

  if (percentage < 0) {
   percentage = 0;
  }

  scrubBar.style.width = percentage + "%";

  video.currentTime = maxDuration * percentage / 100;
 }
}
scrubber();

#container {
 margin: 10px 0 0 0;
 width: 853px;
}

#scrub_bar_box {
 width: 100%;
 height: 40px;
 background-color: #000;
}

#scrub_bar {
 position: relative;
 top: 10px;
 width: 100%;
 height: 20px;
 background-color: red;
}

<video id="vid" controls>
 <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
</video>
<div id="container">
<div id="scrub_bar_box">
 <div id="scrub_bar"></div>
</div>
</div>
<br>
<p id="time"></p>
<p id="dur"></p>

Answer 1

这是因为你的数学有点不对劲。在计算百分比时，你必须计算父容器的宽度，而不是随着视频的进行而动态变化的红框宽度。在这里，我固定为您编码。立即尝试。

var video = document.getElementById("vid");

function scrubber() {
 var scrubBar = document.getElementById("scrub_bar");

 video.addEventListener("timeupdate", forNoOne);

 function forNoOne() {
  var percent = video.currentTime / video.duration;

  document.getElementById("time").innerHTML = video.currentTime;
  document.getElementById("dur").innerHTML = video.duration;

  scrubBar.style.width = (percent * 100) + "%";
 }

 var drag = false;

 document.addEventListener("mousedown", function(e) {
  drag = true;
  updateScrubber(e.pageX);
 });

 document.addEventListener("mouseup", function(e) {
  if (drag) {
   drag = false;
   updateScrubber(e.pageX);
  }
 });

 document.addEventListener("mousemove", function(e) {
  if (drag) {
   updateScrubber(e.pageX);
  }
 });

 function updateScrubber(x) {
  
  var maxDuration = video.duration;
  var position = x - scrubBar.offsetLeft;
  var percentage = 100 * position / document.getElementById('scrub_bar_box').offsetWidth;
  if (percentage > 100) {
   percentage = 100;
  }

  if (percentage < 0) {
   percentage = 0;
  }

  scrubBar.style.width = percentage + "%";

  video.currentTime = maxDuration * percentage / 100;
 }
}
scrubber();

#container {
 margin: 10px 0 0 0;
 width: 853px;
}

#scrub_bar_box {
 width: 100%;
 height: 40px;
 background-color: #000;
}

#scrub_bar {
 position: relative;
 top: 10px;
 width: 100%;
 height: 20px;
 background-color: red;
}

.as-console-wrapper {
display: none!important;
}

<video id="vid" controls>
 <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
</video>
<div id="container">
<div id="scrub_bar_box">
 <div id="scrub_bar"></div>
</div>
</div>
<br>
<p id="time"></p>
<p id="dur"></p>

视频洗涤器拖动有问题

Video scrubber dragging is being buggy

javascript

video

html5-video