In this series, we'll be inspecting some web apps and components that you probably see everywhere, but maybe never really looked into. This time we'll be finding out how HTML5 video players work with an interactive example!
Check out the first Under the Hood app on CodePen!
Quick, name five methods on the HTML5
video tag! ...
...because if you just did so without a hitch, you're in a better spot than I was a week ago.
Welcome to a new series! In Under the Hood, we're going to be taking a look at the code behind the components, features, and applications that you probably see everywhere on the internet, yet you've never stopped and wondered how they work.
The goal is to make it more inviting to dive into these kinds of web components yourself! After all, I've found that I'm much more eager to work with parts of an API once they've been demystified and I have a grasp of what's going on behind the scenes. This week we're starting off easy and diving into the HTML5 video player!
(Disclaimer: I am not telling you to not read the docs. You should still be reading the docs.)
What do you mean
video.mute() isn't a valid function? How else am I supposed to mute this video?
If you're like me, your first impulse when you run into a situation like that is to do this:
This gives you every property and method that's being passed down through the video tag's entire prototype chain.
Which promptly leads you to look at the docs, which points you up to the
video tag's direct prototype, which tells you that there is no method named
mute(), but there is a property called
muted... what if I type in
video.muted = true? Oh, that worked!
You typed that code in yourself, saw the result, and learned something new! Unfortunately, navigating the docs isn't always so straightforward. This is why I think that learning things by interacting with a real app that uses those things is a great way to go!
With that aside, I encourage you to check out the first Under the Hood app on CodePen! This app exposes the code being executed when you interact with an HTML5 video player, so you can skip all the wading through the docs and see the API for yourself!
Next time I'll be tackling something a little more complex... have you ever wondered how fancy CSS page transitions and animations work?