Implementing Cross-Browser Video Playback in HTML5

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.

Frequently Asked Questions (FAQs) about Implementing Cross-Browser Video Playback in HTML5