Lab 24 Reflection

     Lab 24 was about creating a video player with customizable volume and speed controls. When creating the video player, I started off by opening a div and putting <video> tags within that div, src set to the video I wanted. After that, I created another div within the parent div for the controls. Within the controls div went one final div for the progress bar; 3 <button> tags for the play, skip, and rewind buttons; and 2 <input> tags both having type set to range for control of the volume and speed. Once the video player was set up and styled, I gave it functionality through the JS. Various components of the video player were stored in an individual variable, such as the video viewer being stored in a variable called video. Then I created several functions that handled giving the video player functionality, such as a function called togglePlay() which itself called other functions in the JS library like .play() and .pause() to give the user control over video playback. Finally, through the use of .addEventListener, these functions were called by the video player after certain events, looking something like video.addEventListener('click', togglePlay); .

     These skills are important for a web designer because videos are a great element to add to a web site and knowing how to give the user control over them boosts its appeal. If you're creating a site for a business that has a promo video, it might be a great idea to put it on the website as advertisement. However, some people may want to speed through certain sections, decrease the volume, or not play it at all. Not having any controls may make having the video a nuisance to some but giving the user controls means the user can play the video however they want. It doesn't take away anything to have the video on the site when the user is given options on how they would like to play the video.