Dave Kiss: Darius, you talked earlier this week about how our iframe and web component players can be dropped right into your application and look really great right out of the box.
Did you know that you can also customize your players using Media Chrome, which is our toolkit for building custom media players? And the player of my dreams is the Windows 98 video player.
What are we looking at here? The Sims? Kid Pix? Spider-Man cartoon maker? What was your go-to?
Darius Cepulis: Don't forget, Rollercoaster Tycoon.
Dave Kiss: Ah, Rollercoaster Tycoon. Nothing worse than setting up an unfinished rollercoaster track with a huge jump.
Darius Cepulis: Oh, those poor peeps.
Dave Kiss: Let me show you what I've built and walk through how it was done. It's a pretty good looking player if you ask me.
You can see that we got the CPU usage going ham. The scroll bars are in place. And if I hit play, we're even gonna get a throwback to one of my favorite parts of Windows 98, which is the intermittent hour glasses that will just appear out of nowhere.
Ultimately, under the hood is just HTML in CSS and a little bit of JavaScript. Lemme show you how it works. Check it out.
No build system here, Dar. We just have a plain old index.html file, like the good old days of 1998. So what I'm doing here is importing Media Chrome Library at the top of the file.
We're also using a little helper for the styling called 98.CSS, which is a really cool project that brings a primitive styling of Windows 98 to the modern web. It was a really helpful starting point for how this video player was built.
Darius Cepulis: This is so cool.
Dave Kiss: I went ahead and imported this library into our HTML file and also have Media Chrome in place. But to get the video into Media Chrome, you can simply add this video tag, and I'm using Mux to stream this video back, but it can really be any video provider that you have your video hosted out there. So if you have a link that you want to drop in, it's going to be compatible with the Media Chrome playback engine.
And the way that Media Chrome works is it breaks up the individual controls of your media player into customizable and stylable web components, little HTML custom elements that can be littered throughout your HTML page, and then styled individually to your heart's content. Some of these media prefixed elements here are Media Chrome elements.
We got a full screen button. We got a loading indicator, which was that loading hourglass that we saw. And then there's the control bar, which is all composed, uh, of different elements for play, pause, seek, and customized based off of what that element is.
So for example, we had this play button. I mean, that doesn't look like a normal 2025 play button if you ask me. And the reason why is because it's been customized with an old school icon from Windows 98 era. I actually found -this might have been a Windows 95, I'm not sure, but I found an old player online and cropped out all of the individual controls so that they fit in as the right size for each individual icon. So we can see that there's the stop here.
All of these different icons can then be placed as the actual icon to use for this video player, which is uh, a really neat way to be able to just kind of override the default playback controls for Media Chrome and provide it your your own entirely. Same goes for the time range.
So we have this media time range in place, and the way that it's customized from like a modern looking time range to this old school progress bar is still all through CSS and CSS variables.
So take a look here at the styles for our time range, and you can see that we just use some Media Chrome-specific CSS variables to be able to define what do we want that bar color to look like. And in this case, it's this linear gradient that kind of does this blocky skip from this navy blue to a transparent line in the middle and giving the appearance of that old school loading feel.
The other part of this that looks like it's part of the video player is the status bar. And this is straight up a component pulled from the 98.CSS Library. And you can see it just creates these little boxes right at the bottom with the CPU usage. There's nothing related to Media Chrome here at all. It's just uh, straight from the library. And you can see we did this little CPU usage ID to add some custom functionality that every one second, let's update the CPU usage text content to have a random number that just makes it feel like you're CPU from your e-machine's desktop is going ham.
This was kind of a weird one, but I wanted it to pause randomly to make it feel like you're, the playback wasn't actually that great. So it will just automatically kind of, uh, throw a pause around and, and bring up the loading indicator to make it feel like the video is struggling to play back, and keeps showing that hourglass spinning and trying to keep up with the, with the desktop.
Then there's one little hidden feature that I have in here, which is the dragging functionality. Do you remember back in the day when you used to really push your computer a little too far and drag windows around and it would create this trail effect?
Darius Cepulis: Takes me back.
Dave Kiss: Well, don't worry Dar. It doesn't have to be a core memory. It can be real functionality in your web app if you simply use a little bit of custom javaScript. So we use this other package here called HTML to Canvas.
The way that that works is ultimately capturing the state or the visual appearance of the video at any given time when it's identifying that the window is being dragged around. When that window starts to drag around, it will capture that appearance and draw the video appearance to a canvas rather than just the video, uh, element or layout itself.
Then it'll kind of throw that canvas snapshot across the whole dragging area at different intervals to make it look like it's just struggling to keep up.
Darius Cepulis: I feel like this really shows you that anything you can do in HTML and CSS, you can combine with Media Chrome to imagine like any player you want.
Dave Kiss: So it's just a little taste. This was my preference of what I wanted to work on for showing off the capabilities and flexibility of Media Chrome.
Definitely check out Media Chrome and the rest of the players that we have to offer over here at Mux.
