Video: What's Inside an HTML5 Player?
Streamroot's Erica Beavers looks at the inner workings and UI elements of prominent HTML5 players such as Brightcove, Ooyala, JWPlayer, and Bitdash, and how they differ from their Flash predecessors, in this excerpt from her presentation at Streaming Media West 2016.
Learn more about streaming players at Streaming Media East.
Read the complete transcript of this clip:
Erica Beavers: When we really thought about it, we came to a pretty simple conclusion that an HTML5 player is not so different than your favorite burger. The analogy actually works really well, because HTML5 has offered a much more flexible framework. We're getting further and further away from the black box Flash-type technologies and into a world where if you can imagine it, you can most likely build it.
What exactly is involved in an HTML5 player? The first, the most upper part of the player, the high-level part of your player is the user-facing part and that's what we're going to call our user interface. That's made up of the skin of your player, which is the design of the player itself. To that, we can add on any sort of business logic features such as payment, authentication, any sort of ads. Then finally in that layer, we have any custom user interface features that go around the player, such as playlists and social sharing, etc.
We then move onto the "meat" of the video player, your media engine. This is going to handle all of your playback logic, such as your manifest parsing, retrieval of video segments and all of your adaptive bitrate rules. It's no accident that we chose the meat of the burger for this part, because it's probably the most important part of your player. It's important not to ignore this part because if your media engine is not very good, your entire player is going to be subpar. You can put whatever on top of it to mask that, but you're not going to be able to really mask that. It's often a neglected part of the video player, but it's one of the most important.
Then finally on the bottom layer, we have everything that takes care of decrypting, decoding and rendering the segments on the screen. There we have the DRM manager, the content decryption module that's actually baked into the browser, then the decoder and the render. Let's take a look at those in a little bit more detail.
First, we have the user interface obviously which is everything that you can customize with your brand's identity. First, we have the skin which can include obviously a control bar, buttons, animations, any sort of icons etc. Then next we have all of our UI logic, the features defining the interaction with the video player on top of just simply playback. We have, these can include playlist bar, thumbnails, channel selection, social sharing etc. The nice thing about a lot of these if you're using a solution like Video.js, for example, a lot of these exist already as plug-ins that you can add to your UI core. If you take a look at the example of Video.js, they have an enormous list of all of these different plug-ins that you can have on your player.
We took the example of the Eurosport Player which actually has something very cool, a switch back to live where you can actually watch the live stream at the same time as you're doing a catch-up, and very easily switch between the two of them. What's nice in HTML5--which is a big difference from Flash—is that this is very easy to do with just a few lines of code and your media engine. You can have several instances of the player and have two different videos actually within the same player very, very easily.
The third component of the user interface is what we like to call your business logic. This includes anything like, as I said, authentication, payment, any type of ad service that you might be using. An addition to these three, perhaps the most important one on this, is actually your, what we call, your configuration logic. It's going to be very important for you to actually be able to detect your user's device and configure the user experience accordingly.
What's nice is with HTML5, you're generally going to be able to develop all of your UI features very simply in CSS and in JavaScript, and then be able to reuse them for across all of your devices to have a seamless user experience. Even if what you have underneath your media engine, underneath might differ from platform to platform. That's one of the beauties of being able to separate your actual playback logic and your UI logic in HTML5.
Related Articles
Viacom's Dan Balis examines the key capabilities and features of current online video players and platforms to help users make informed choices when migrating to a new player after the demise of Flash.
09 Feb 2017
Disney's Mark Arana and Wowza's Chris Knowlton discuss the challenges content owners face in migrating their video from Flash to HTML5, and the importance of knowing where their video will land before planning their migration strategy.
02 Jan 2017
Streamroot's Nikolay Rodionov walks viewers through the key elements of an effective A/B testing workflow for testing video players during development.
19 Dec 2016
Streamroot's Erica Beavers explains what A/B testing is and how it can benefit organizations building custom video streaming players.
15 Dec 2016