February 15, 2012

How to Embed HTML5 Video [The Smart Way]

2 min read

Written by: Christopher Mathieu  |  Share:

As an effective B2B marketer, you need to ensure that your messaging is suitable the proliferation of mobile devices that your customers are increasingly using to learn about your value proposition. Video, animations and slide shows at times are the best medium to communicate complex stories in compressed time-frames. Is it safe to use HTML5 video? Absolutely!

The goal of embedding video on a webpage (aside from it looking crisp, and streaming well) is to reach the largest audience possible on a wide array of browsers and devices. This became quite a bit more complex a couple years back when Steve Jobs declared that Flash was dead and that it WOULD NOT be supported on the beloved iOS (iPhone, iPad, iPod).

While HTML5 video has always worked on iPhones and such, we can't completely go that route and abandon all our regular desktop users that may or may not be using fully HTML5 compliant browsers. In a nutshell, we can't use Flash for mobile devices and we can't safely use HTML5 for non-mobile devices.

The safe answer, as you may have already guessed, is to use both. Historically, we'd have to render the video out in a variety of formats (FLV, MP4, Ogg, etc) to serve the needed version to a particular platform. This was annoying, time consuming, and not cost effective. Due to all of these hurdles many mobile users simply DID NOT get to view embedded video. Thanks to improvements in both the Adobe Flash Player and to modern browsers enhancing their HTML5 support* we can now use a single video file that will play on just about every popular platform you can think of.

This post isn't supposed to be about Codecs so I'll keep this short, but the key is to generate a .MP4 file that uses H.264 for video and AAC for audio. There are a few tools on the market to do this, but typically I use the Adobe Media Encoder which has been bundled with the Creative Suite for a while now.

Read (and Watch!) our Ultimate Video Book to Generating Demand with Video to  learn all the steps to effectively use video to supplement your demand  generation program.

So now we have a single file that both the Flash Player and a HTML5 compliant browser can stream. The next step is to actually embed the video onto you webpage. Since the largest portion of our web audience STILL CAN view Flash we'll serve that up first and if the browser doesn't support Flash it will automatically serve up the HTML5 version instead.

We'll embed Flash like always using swfobject but instead of leaving the alternate HTML content as "Content on this page requires Adobe Flash Player" we'll stub in the HTML5 <video> tag.

It will look something like this:


Thankfully the HTML5 video tag is VERY simple to use. In this example I have parameters to set the size, whether or not to show playback controls, and finally the source of the video. If you want more information on this tag w3schools.com has a good entry.


View Sample Video

I hope you've enjoyed this post and if you want to try this out on your own you can get a head start by downloading my source code below. Keep us updated on what you have tried and if you have if you have any other ways of tackling HTML5 video let us know. ->  HTML Video Embed Source Code (.zip) * Firefox though a great browser currently still does NOT support H.264 due to licensing costs. However based on recent statistics 95% of desktop browsers still have the Flash plugin installed so this really isn't much of an issue. More information on the Flash Player install base is available here.

download the Ebook: generating demand with video

Topics: Website Strategy

About The Author

Christopher Mathieu is the Chief Design Officer at New Breed, where he oversees the creative strategy behind every project we produce. His unique ability to combine his fine art background with his technical web expertise has led Chris and his team to produce countless sales-ready websites and inbound marketing collateral that drive results.

Ready to transform your current marketing + sales teams?  Request a free assessment and get started today. Free Consultation