It becomes more clear every day that Flash is dying as the default option for video playback. It may be the old standby for now, but there are better things on the horizon. Of course, the most promising is HTML5 Video.
Currently HTML5 is only supported by some of the more modern browsers such as Chrome, Safari and Firefox. For this reason, the key to good implementation of HTML5 Video is a properly configured player that will fallback to Flash when needed. Fortunately there are a number of free tools that make this process relatively easy.
Here is a list of the resources I use that will help you get your video online in no time:
1. Video Conversion
Because HTML5 video plays inside a native player built into the browser, there are actually three different video formats that need to be made available. Don’t worry, there is an app for this. The Miro Video converter offers a hassle free drag and drop interface, it is completely free, and available for Mac or Windows. All you will need to do is drag your source video to the Miro converter and export them to these three formats:
- Theora*
- WebM (Vp8)
- MP4
* In my experience, the .ogv extension that the Miro converter transfers to can be flaky with Firefox so I recommend changing the .ogv extension to .ogg.
2. Choosing a Player
While HTML5 Video plays natively in your browser, it is best to go with a Javascript based HTML5 Video Player. These players offer several benefits such as css customization, automatic browser detection and a flash-based fallback option for older browsers.
My personal favorite player is VideoJS. The reason that I like this player is because it is very easy to implement and comes with several great looking css customizations. Here is a list of a few other players.
3. Including The Code
VideoJS and other players usually require a javascript framework like JQuery and one more additional js file. Step by step directions for VideoJS are available on their site.
4. Building The Embed Code
The embed code that is required for the actually video player can be pretty overwhelming. The code for the VideoJS is 19 lines in it’s most compact form.
Thankfully, there has a handy embed code builder on the site that will create the prefect markup for your video. Generally I feel very comfortable working with code, but this just makes it so simple that I have to use it.
5. Publish and Test
The video and player changes slightly for each browser so once you publish your page you will want to test it out on all of the major browsers. I always check my pages in Google Chrome, Safari, Firefox, IE 8, IE 7 and sometimes even IE 6.
An that is it. Not so bad right?
I used HTML5 video for my latest video project and love the results. What HTML5 players have you used and what is your favorite? Let me know in the comments.
Steve Heffernan says
Thanks for the mention Garrett. Great post.
-Heff (VideoJS / Zencoder)
Chris says
Love Miro. So easy to use. And free!
I built a small template for HTML5 videos using this (http://camendesign.com/code/video_for_everybody). It seems to work great and degrades nicely.
I use JWPlayer from LongTail but they may have commercial restrictions on the player.
steve says
These tools are great! Worked on every browser and mobile device on the first try. Full screen works well too.
Graham Brenna says
That video converter looks promising! Thanks for sharing. I’ve been using MPEG Streamclip for some time and it does the job. Can’t wait to use the new one.