javascript - 视频洗涤器拖动有问题

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>