Implementing Cross-Browser Video Playback in HTML5

Tara Hornor

One of the most celebrated elements of the new HTML5 specification is the ability to natively handle video playback. A simple <video> tag is “all that is needed” to get instant video support on many modern browsers — or is it? Not all browser versions can handle this HTML5 feature just yet; as of January 2012, the <video> element is partially or fully supported by about two thirds of browsers worldwide. Below are some options for making sure the <video> element is working well for both modern and not-so-modern browsers.

But, wait! Why would you even bother with using <video> when you can just upload to YouTube and embed the video? After all, YouTube has mobile support and makes encoding an easy process. Despite the popular belief that YouTube is all you need, it does have some notable downsides. For example, at the end of your YouTube video a series of other recommended videos is displayed, which may draw users away from your site. YouTube also adds a small watermark to every video, which isn’t always acceptable. If your videos contain sensitive, copyrighted, “members only,” or “employees only” information, self-hosting is likely your only option. There are plenty of cases where YouTube is not a viable option. If you find yourself in one of those predicaments, here’s how to design reliable, self-hosted video playback on your site.

The <video> Tag Basics

The <video> element works in the latest versions of all major browsers (IE9+, Firefox 7+, Chrome 14+, Safari 4+, and Opera 11+). A typical implementation of <video> looks like this:


<video controls poster="linktoposter.jpg" width="640" height="360" controls="controls">
 <source src="linktovideo.mp4" type="video/mp4" />
 <source src="linktovideo.webm" type="video/webm" />
 <source src="linktovideo.ogv" type="video/ogg" />
 <p>Fallback text.</p>
 </video>

Note how you reference several versions of a video. This is because not all browsers support MP4 playback. Those that do not will skip to the WEBM format. If the browser doesn’t support MP4 or WEBM, it will default to the OGV format. Between these three formats, you should have compatibility with just about every common browser.

Let’s take a closer look at the <video> attributes used above:

  • poster - a link to an image that will be displayed while the video is loading or prior to the visitor clicking on the play button
  • controls – tells whether or not the visitor can see the video playback controls
  • source – the link to the video file’s location
  • source type - the video format of the referenced file
  • fallback text – the text within the <p> tags will display if the browser cannot play any of the three video formats

Keep the following fixes in mind if you’re having trouble implementing <video> on your website:

  • The MP4 version of the video must be listed first because of a bug in the iPad.
  • If the video will not play back on a common, up-to-date browser, you may need to add the proper MIME types into your .htaccess file:
  • Add Type video/ogg – ogv
  • Add Type video/mp4 – mp4, m4v
  • Add Type video/webm – webm

Converting Video

The prospect of converting your video to different file types may sound tedious, but it’s easily done. A free resource for converting video files into multiple formats is Miro Video Converter, which lets you transform your video files into different formats while retaining the original dimensions. Other tools are available, but for a standalone, simple process, Miro Video Converter is the way to go.

Backwards Compatibility

In order to ensure that older browsers can view your videos, you should rely on an Adobe Flash fallback. Because this compatibility issue with older browsers is a common problem, there are several libraries and scripts online that can do a lot of the heavy lifting for you. We’ll look at two of them:

  • MediaElement.js – A toolkit that gives you the option to include just one single .MP4 file, as well as the freedom to use “multiple codecs with Flash fallback.” There are plugins for Drupal and WordPress (among others) which make this a great option. Keep in mind that this option is javascript-dependent, and you’ll be given a lot of options (a good thing) with what you can do to the player. Click here to check out MediaElement.js.
  • Video for Everyone – This is a no-javascript solution that provides a very simple way to ensure compatibility with older browsers. There is nothing to download or install; the only call you will need to make is to a Flash container. There are a few of these: FlashFox, Flow Player, and JW Player. Click here to check out Video for Everyone.

Code Sample:

Of the two methods, the Video for Everyone requires the least setup, so here’s the code:


<video controls="controls" poster="linktoposter.jpg" width="640" height="360">
 <source src="linktomovie.mp4" type="video/mp4" />
 <source src="linktomovie.webm" type="video/webm" />
 <source src="linktomovie.ogv" type="video/ogg" />
 <!-- Fallback object using Flow Player -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
 <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
 <param name="allowFullScreen" value="true" />
 <param name="wmode" value="transparent" />
 <param name="flashVars" value="config={'playlist':[ 'linktoposter.jpg',{'url':'linktomovie.mp4','autoPlay':false}]}" />
 <img alt="My Movie" src="linktoposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below." />
 </object>
 <!-- Fallback Text -->
 Your browser does not appear to support a browser. Please download the video below.
</video>
 <p>
 <strong>Download video:</strong> <a href="linktomovie.mp4">MP4 format</a> | <a href=" linktomovie.ogv">Ogg format</a> | <a href=" linktomovie.webm">WebM format</a>
 </p>

The beauty of Video for Everyone is that it only requires a single .MP4 file to work. But, it’s still a good idea to have the WEBM and OGV formats, as they are supported by many browsers.

Browser Compatibility

If you are wondering which modern browsers support which formats, here’s a simple breakdown.

Browser MP4 OGV WEBM
IE9 Yes Manual Install Manuall Install
Firefox (10) No Yes Yes
Chrome (17) No Yes Yes
Android Yes Yes Yes
Safari (5.1.3) Yes Manual Install Manual Install
Opera (11.61) Manual Install Yes Yes

In Sum…

So, if you have all three file formats — MP4, WEBM, and OGV — you should have most of your bases covered, with the exception of very old browsers and obscure browsers. That’s where the Flash fallback comes into play. Using one of several Flash fallback techniques along with HTML5 is a solid combination of cutting-edge techniques and accommodations for older browsers.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kent Allard

    Why not use use videojs?

    • Tara Hornor

      Hey Kent,
      I may do a follow up article on implementing video with Video.js. I wanted to walk designers through a non-JavaScript version of implementing video first, though.

      I usually reach for the JW Player, but mostly because that’s what I’m used to using :)

      • amidude

        JW Player FTW!! w00t!

  • Ryan Kinal

    Does anybody else find it odd that Android supports all three formats, but Chrome doesn’t?

    • Tara Hornor

      It is a bit of a mixed message, isn’t it! My understanding is that Google wants to pressure the MPEG folks to drop royalties for use of H.264 libraries. So Google opted to support open-source only video formats.

      As to why Android still supports it, I think that has to do with making sure Android doesn’t have to use Flash. My opinion is that Flash is under-supported on Android on purpose.

  • http://www.delucamarketing.ch NetHawk

    I gave up on Ogg format. The available video tools do not meet pro standards. And I think with H.264 (native and via Flash) and WebM one can cover almost every device.

  • http://gpysports.org/dice.html Jim Mooney

    You mean fallback techniques for crummy Internet Explorer. Other major browsers have done HTML5 long enough so there is little or no problem. But Msoft refuses to let you use the (still laggin) IE9 unless you buy Windows 7. Unfortunately, half of users still have XP, especially in institutions. So despite the campaign to get rid of IE6, we will be stuck with a crappy, non-HTML5, non-CSS3 browser for the forseeable future. Once again, Msoft has started a write-two-sites browser mess and held back the web.

    • Tara Hornor

      Ha ha! I feel you. :)

  • Anuraj

    Hai Tara Hornor,

    Thanks for sharing this..

  • http://trabalharonline.com Diogo Gomes

    Great article, just what I need.

    I think the tag code below the fallback is not supposed to be there, right?

    Thanks

    • Peter North

      Hi Diogo.

      You are correct. I’ve removed the unnecessary tag. Thank you for pointing that out!

  • Ana

    at the end of your YouTube video a series of other recommended videos is displayed, which may draw users away from your site

    Actually, you can control that.

  • steve

    It appears from your list that webm and ogg “hit” exactly the same browsers – I don’t see what you gain by supplying both (and at a fairly large expense of disk space..the webm’s I’ve seen are fairly large wrt mp4…)

  • http://www.bizbytes.co.uk BizBytes

    Hi Tara, great article. I am having such a problem on my online business training website, trying to get the videos working on all browsers. I will get my developers to work on your recommendation.
    Thank you :-)

  • Phil

    Hi, new to all this. I have Quicktime. Using Snow Leopard. Do I have to do something like change the name on the links? Like where you have “linktovideo” Do I put the name of my video there? What do I do? Do I copy this code and put it in iweb? Can you help me.