28 - Video Speed Controller/index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Video Speed Scrubber</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>

	<div class="wrapper">
		<video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1"
			loop controls></video>
		<div class="speed">
			<div class="speed-bar">1×</div>
		</div>
	</div>

	<script>
		(function () {
			const speed = document.querySelector('.speed');
			const bar = speed.querySelector('.speed-bar');
			const video = document.querySelector('.flex');

			speed.addEventListener('mousemove', handleMove);

			function handleMove(e) {
				// position of the mouse relative to the top edge of 
				// the doc - position of the element to the top
				const y = e.pageY - this.offsetTop;
				const percent = y / this.offsetHeight;
				const min = 0.4;
				const max = 4;
				const height = Math.round(percent * 100) + '%';
				const playbackRate = percent * (max - min) + min;		// offset the value 

				bar.style.height = height;
				bar.textContent = `${playbackRate.toFixed(2)} X`;
				video.playbackRate = playbackRate;
			}
		})();
	</script>
</body>

</html>