4 minutes
Javascript 30 Day 11: Custom HTML 5 Video Player
Oh wow!
I had so much fun with this. I think what I’m enjoying best about this is just learning how not crazy hard some stuff is. I’ve been programming forever. Over 33 years. But there’s still stuff (ok, maybe a lot of stuff) that makes me just wonder how in the world it’s even possible. I know it’s possible. I’ve seen it done, but since I don’t know how it’s done, there’s still things that seem like magic. I think one thing I keep going back to is video games. I’ve been playing video games slightly longer than I’ve been programming, and many years ago I tried to make my own games. Now granted, hardware is thousands of times faster and just about everything is loads better, but some part of my brain is still stuck in tech from over 30 years ago. Back then having a screen of 320x240 pixels update quickly enough to look like something was moving seemed like an accomplishment. Now I feel being able to render millions of pixels and still have time to make decisions about what should happen that would cause the pixels to change seems crazy. I remember working like crazy just to get a little space ship on the screen to shoot lasers at something and how difficult that seemed.
Some of it, I think is looking at web programming where most of my day-to-day development is writing web APIs where there’s not necessarily a ton of decisions, at least not in the same way I think decisions like game AI need to be done and a “fast” response is in the range of a couple hundred milliseconds, and then thinking that if I took that long to do AI coding and got all the screen updates for free, I’d be looking at under ten frames per second, and then I get sad and move on to something else. Going through this Javascript 30 course, being exposed to new APIs and functions - functions that I haven’t seen before and haven’t either needed to figure out how to do or haven’t even tried because it wasn’t in my realm of what I thought I could do, and finding that not only are they available and accessible, they are easy, has been great. Part of the learning process I enjoy the most is just the demystifying and de-magic’ing that comes with knowing a little more about how stuff works. Often it’s just a tiny step from what I know, but it’s a step I couldn’t see or didn’t know about.
I’ve been looking forward to doing this lesson since I saw it coming up in the list for a number of days now. As you can see, my last Javascript 30 writeup was 9 days ago, so getting to do this one finally has been great. Similarly to the audio lesson, the video one has been eye-opening because of how simple and easy the HTML 5 stuff makes everything. Back in the day it was Flash or some custom, home-grown magic, or purchasing some web app if you wanted to get video to work. Now it’s a <video> element and you can speed it up, slow it down, skip around, play, pause, whatever you want and it’s all just… Right there.
Everything in the video, all the functionality, the scrubbable (and working) progress bar, video speed controls, volume, everything, is essentially one event listener and literally one-liner javascript functions. There are a few that I did in a few more than one line, but even though could be reduced to a single line. SO COOL!
Rather than write up everything I learned on this day (which was just about all the stuff having to do with the functions and properties you can interact with video, I’m going to encourage you to go and sign up at Javascript30.com and do the course and this lesson on your own. It’s super rewarding.
The final challenge from Wes was to implement a full-screen toggle for the video. This, too, turned out to be a couple lines of code (this is the one that I could one-line, but for ease of reading, I did not). I also ended up playing around and seeing what else I could do. One of my experiments was making the video player rotate based on the percentage of the video that had played. While it was really simple to do and fun to watch, for a bit, I decided to remove that code because having a slowly rotating video might not be the best experience over all. But it was possible, and it was super easy and very fun to do.
Looking forward to day 12!