View on GitHub

JS30

a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.

28-speed-controller

demo gif

Back to home page

User stories

Notes

Move the controller with mouse

Whenever user hovers over the controller, calculate the percentage of where the cursor locates.

const speed = document.querySelector(".div_speed");
const bar = document.querySelector(".div_speed-bar");
const video = document.querySelector(".flex");

function handleMove(e) {
 //Controller UI
 const y = e.pageY - this.offsetTop; //this.offsetTop is the distance between the top of the page to the top of the controller
 const percent = y / this.offsetHeight; //where the cursor locates in the controller in percentage
 const min = 0.4;
 const max = 4;
 const height = Math.round(percent * 100) + "%"; //the height of filler in the controller
 const playbackRate = percent * (max - min) + min; //0% will be 0.4 and 100% will be 4
 bar.style.height = height; //update the height
 bar.textContent = playbackRate.toFixed(2) + "x"; //update the text
}

speed.addEventListener("mousemove", handleMove);

Adjust the video speed

Set the video speed to the speed result we have.

function handleMove(e) {
 //Setting speed
 video.playbackRate = playbackRate;
}