Day 11 of #javascript30 is dealing with controlling a video player.
Like with the <audio> element, I was amazed at how simple the interaction with the player is in the <video> element. I learned how to control volume, skipping and the progress bar. Neat! Once again it blew my mind how many events you can listen for. Here is a list of media events and listening on them instead of trying to keep your own state for example the play button makes a ton of sense.
Flexbox was used in the lesson to control the controls and the super handy flex-basis was used for the progress bar in percent. Simple and elegant.
For the sliders for volume and playback rate, the function used in the lesson used the name of the event it was listening for to set the value. Sorta like this:
video[this.name] = this.value;
Where this is the event. The name of the events in this case was either playbackRate or volume, so it the could also be written like this:
if (this.name === 'volume') {
video.volume = this.value;
}
else if (this.name === 'playbackRate') {
video.volume = this.value;
}
.. but the first piece of code is much easier to use and understand once you get over the initial confusion thinking — wait.. Is video an array?. Obviously this will only work if the event names and the property names are the same.