JavaScript30/28 - Video Speed Controller/index.html at master · tgdev/JavaScript30

45 lines (36 loc) · 1.17 KB

<!DOCTYPE html>

<head>

<title>Video Speed Scrubber</title>

</head>

<body>

</div>

const speed = document.querySelector('.speed');

const calcRate = function calcRate(e) {

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;

updateUi(height, playbackRate);

};

const updateUi = function updateUi(height, rate) {

const bar = speed.querySelector('.speed-bar');

const video = document.querySelector('.flex');

bar.style.height = height;

bar.textContent = `${rate.toFixed(2)}x`;

video.playbackRate = rate;

};

speed.addEventListener('mousemove', calcRate);

</script>

</body>

</html>

Provide feedback