JavaScript 30 — Day 11 — Custom HTML5 Video Player
The default controls for an HTML video player are fine but nothing special.
Wes walks through setting up some custom controls, many of which are the same as the default, but this way you can understand the logic of how you can build them from scratch as well as being able to style them.
Similar to how I found the HTML5 Canvas exercise this was a lot of dealing with the specific properties that come with video elements in HTML.
The video duration, currentTime, volume, and playbackRate properties are the main crux of how to handle the controls in this exercise but there are a ton of others you can play around with.
As always Wes is making good use of data attributes in the markup and I’m really starting to love them.
What I like about this is that audio and video elements have a lot of overlapping properties so you could definitely extend these controls to a project using audio elements if you wanted to.
Some things to reviews:
Not specific to this exercise but Wes did bring it up, are the different fun ways to write conditional statements.
The always handy if/else:
if (a === true) {
console.log("It’s true");
}You can always shorten this up to a one liner.
if (a) console.log("It’s true");The fantastic ternary operator (?):
a ? console.log("It's true") : null;And the possibly less commonly used logical operator version of this:
a && console.log("It's true");Be careful with this last one though, it is specifically reliant on evaluation of the truthy values. In some simple cases it works and works well but when it goes beyond a one line condition, it’s best to stick with the first two.
Take a look at this Stack Overflow thread that goes over these different ways a little more.
There’s also the (Switch/Case) vs. (if/else/else if) but that’s a discussion for another day.
