How to Code a Custom HTML5 Video Player

Though the idea of a video-specific HTML element was suggested well over a decade ago, we’re only just beginning to see this come to fruition! Forget all of that “HTML5 2012” mumbo-jumbo; the truth is that you can use the video element in your projects right now!

The only problem is that the video players are inconsistent from browser to browser, and full-screen support is, at the time of this writing, only available in certain browsers, via a right-click. Further, what if we want to brand our video player? Unfortunately, there isn’t an easy way to do so by default.

The solution is to create a custom player that remedies all of these issues.

What this Tutorial Covers

• The appropriate mark-up for the new video element.
• Add Flash fall-back support for IE.
• Create custom controls.
• Offer full-screen support
• Scrub through videos

What’s Coming Next

A tutorial that covers far too much helps no one. This tutorial gets us started, and allows to build a working video player. In the follow-up to this Premium marketplace tutorial (which will be free to all purchasers of this tut), we’ll take our video one step further, and integrate a volume control, a clock, and a plethora of other cool features.