Javascript30 - Day 11 - Custom Video Player 📺

Good project to learn about the video side of HTMLMediaElement. I found it pretty straightforward to implement all of the different controls, but I can imagine if you're newer to JS it might be a little more daunting.

MDN is pretty valuable for a project like this and having that reference makes this project as simple as connecting buttons and controls to the HTML5 video API.

I couldn't get the progress bar to update quite as smoothly as I'd have liked, but I think there's got to be a way to do that with css animations.

The video itself is a good introduction to using events that are added by components or third-party libraries such as video.timeupdate, video.playing, video.paused etc.

The video also gets into ideas such as listening to a whole class of inputs (such as range sliders). I'm generally not a fan of combining the event listeners for different inputs like this as I think it makes the readability a little more difficult, but it's worth knowing how to do.

I'm impressed by how well Wes takes big pieces of functionality and breaks them down to bite sized elements. I think this is a core reason his lessons are so accessible and beneficial. This skill is core to software engineering and something that is hard to communicate and not always taught well.


Completion Time: ~45 Minutes

You can sign up for Javascript30 here:

You can view my shift multi-checkbox here:

You can see my code here: