Introduction

So I am now officially on the HTML 5 band wagon. After poring over some forums and articles on video integration with HTML 5, I couldn’t help but feel inspired to learn more about this new hope for web development. Along my web travels I happened to stumble upon Mozilla’s HTML 5 demos, which I found HERE, and I was simply blown away. It was pretty much like interacting with a Flash movie but without the Flash!

But enough with the “oohs” and “ahhs” about HTML 5. Let’s get on to why we’re here in the first place, which is HTML 5 video. While HTML 5 still has a long way to go before being completely supported and in wide use, there are still some features of the HTML 5 specification that are currently being implemented. Video is one of these features that’s slowly creeping its way into today’s websites. The truly wonderful trait of HTML 5 is its cross-platform compatibility, and more importantly, its compatibility with mobile devices. No longer will certain phones be kept out of the loop when it comes to watching videos on your website!

Though this new specification provides us with a way to distribute our videos to almost everyone with an internet connection, the fact of the matter is is that HTML 5 support is still taking its first baby steps. Ultimately, this means that while we can still integrate video into our pages we still need to handle the situations where HTML 5 isn’t supported. But fear not, in this tutorial we solve this problem and ensure that our content gets to the user, one way or another!

HTML 5 Video Player In Action

Before we dive into the code here’s a preview of what this tutorial is all about.

 

 

 

 

 

 

 

00:00/00:00

 

 

 

00:00

 

 

 
You won’t know this until you’ve tested this out on other browsers, but there are actually three different source videos queued up to ensure that the content gets served no matter what browser or platform you’re using. Granted, it won’t reach 100% of you, but it will certainly get pretty close.

You’ll also notice that the video player looks the same across all the browsers. This is one of the nice perks of skinning your own media player. Of course, if you don’t have the time to build a skin on your own you can always find some on the web. Videojs, for example, not only offer a couple of varieties of skins, but also features a convenient code builder that neatly creates video embed code for your own use. If talk of pre-made skins haven’t veered you off this page yet, then read on to learn how you can make your own personal HTML 5 video player.