Video Essentials

How to Build Your Own HTML5 Video Player


Sometimes, good things start out a little sketchy. HTML5 video, for example, has more than its share of rough edges. In his presentation on building an HTML5 video player at the recent HTML5 Video Summit in Los Angeles, Steve Heffernan, co-founder of cloud encoding company Zencoder and creator of the open-source Video.js video player, told how he himself started out with problems.

Showing a picture of himself at six, Heffernan told about the many misfortunes he suffered that year.

“This is me at six-years-old. This is probably the best picture of me at six-years-old. A little while after this I fell out of a hammock and killed my front two teeth, and they had to put big metal caps over my front two teeth. It was really attractive. I also had a lazy eye. In order to correct the lazy eye they had to put a patch over my good eye. It wasn’t a cool patch, like a pirate patch; it was a big Band-Aid. Then I had glasses on top of than. And I also had a speech impediment because I couldn’t say my Rs. In order to correct that, they had to put plastic tubes in my ears to help me say my Rs. So there was me with my metal caps, patch, glasses, speech impediment, tubes out of my ears,” said Heffernan, setting the stage.

“HTML5 video is kind of like me at six-years-old. It has the potential to someday be a fully-functioning HTML tag, but at the moment it’s got some issues. We have to know what those are in order to work with it and build video players on top of it. Eventually it will be that dominant playback method, or, at least, I think it will be,” Heffernan added.

For step-by-step instructions on creating your own HTML5 video player, watch Heffernan’s presentation below. Also, read Heffernan’s Streaming Media article on building an HTML5 player.


How-To: Building an HTML5 Video Player

This live coding session will demonstrate how to develop from scratch your own interface for HTML5 video, including embedding a video using HTML5, building custom controls using the JavaScript API, fallback strategies for older browsers and devices, and fixing known playback bugs on the iPhone and Android. By the end of the session you should feel comfortable adding HTML5 video to your own site.

Speaker: Steve Heffernan, Creator, VideoJS




Discussion

Comments are disallowed for this post.

Comments are closed.