Lab 41 Reflection

Lab 41 was about creating a video player with a slider that could change the video speed, similar to lab 24, but this time the slider looked like a progress bar and didn't need to be clicked to be changed, just hovered over. I started by creating a div for the player, opening up <video> tags with src set to the video I wanted and a div within another div for the speed bar. In the JS, I stored the speed bar in a variable and made a function, handleMove(e), that calculated the offset from top and bottom of the fill of the speedbar and adjusted the video speed accordingly, using the .playback() method to do so. I called this function on the speedbar via .addEventListener on mouseover.
These skills are useful for a web designer because they add a new way a video can be controlled. Previously, we controlled the speed of a video via an <input> set to range but it can also be done with a more intricately styled div. Depending on the layout and design of a website, one method might be better than the other but both are an option on how to approach making a website's video player.
Comments
Post a Comment