Lab #41 Video Speed Controller

For this lab, I had created a website that allowed you to control a video's playback video speed. I added a video via the video tag in HTML and then added a bar that you hover your mouse over in order to change the playback speed. It can either slow it down or make it faster.


To create the playback speed feature, I added a speed bar as a div. To create the functionality for it, I used JavaScript by setting the speed, bar and the video as variables. I then used these variables to calculate what rate the video would be played at based on the progression of the bar on the right side. Also the JavaScript contains the event listener that checks if your mouse if over the bar, and it changes the playback speed depending on the position of your mouse on that bar.

Web designers can use this feature to allow users more control of your website. For example, websites like YouTube have a playback speed modifier that allows you to make a video play slower or faster. This can also be useful for informative videos as there are times when you would want to take notes if someone is talking too fast, or speed it up if they are too slow.

Comments

Popular posts from this blog

WBL Workshop #6 Interview Skills

CTE Expo Reflection Journal

Lab #12 Reflection