A video speed controller. Built for Wes Bos' JavaScript 30 course.
The goal is to be able to update the video playback speed by hovering over the speed controller.
First, select the speed
div, the bar
div within it, and the video.
Add a mousemove event listener to speed
and connect it to the function handleMove
.
Inside handleMove
, set y
to e.pageY - this.offsetTop
.
Get the percent
by setting it to y / this.offsetHeight
.
Don't use an arrow function as you need this
to be equal to the speedbar itself.
Set min
to 0.4 and max
to 4, or whatever min and max speeds you want.
To have the bar respond to user input, set height
to Math.round(percent * 100)
, and set bar.style.height
to height
. Then set playbackRate
to be percent * (max - min) + min
and set the textContent of bar
to be playbackRate.toFixed(2)
. (This rounds it to two decimal places).
Finally, you want to apply playbackRate
to the video, so set video.playbackRate
to be playbackRate
.