Implementing Cross-Browser Video Playback in HTML5

Tara Hornor
Tara Hornor
Share

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

What is cross-browser video playback in HTML5?

Cross-browser video playback in HTML5 refers to the ability of HTML5 videos to play seamlessly across different web browsers. This is crucial because not all browsers support the same video formats or have the same capabilities. HTML5 provides a standard for playing videos online without the need for plugins, but the implementation can vary between browsers. Therefore, to ensure a smooth user experience, developers need to implement cross-browser video playback.

Why is cross-browser compatibility important for HTML5 video playback?

Cross-browser compatibility is important for HTML5 video playback because it ensures that your video content can be viewed by as many users as possible, regardless of the browser they are using. Without cross-browser compatibility, some users may not be able to view your videos, leading to a poor user experience and potentially lost audience or customers.

Which video formats are supported by HTML5?

HTML5 supports three main video formats: MP4, WebM, and Ogg. However, not all browsers support all three formats. For example, Internet Explorer and Safari do not support WebM and Ogg, while Firefox does not support MP4. Therefore, to ensure cross-browser compatibility, it’s recommended to provide your video in all three formats.

How can I implement cross-browser video playback in HTML5?

Implementing cross-browser video playback in HTML5 involves providing multiple sources for your video in different formats. This can be done using the tag within the

What are the limitations of HTML5 video playback?

While HTML5 video playback has many advantages, it also has some limitations. These include varying support for video formats across browsers, lack of full-screen support in some browsers, and potential issues with video streaming and buffering. However, these limitations can often be overcome with careful coding and the use of fallback options.

How can I ensure my HTML5 video is accessible to all users?

To ensure your HTML5 video is accessible to all users, you should include captions or subtitles for those with hearing impairments, provide a text transcript for those with visual impairments, and ensure your video player is keyboard-accessible for those with mobility impairments. You should also provide fallback options for browsers that do not support HTML5 video.

What is a fallback option and how do I implement it?

A fallback option is an alternative way of delivering your video content to users whose browsers do not support HTML5 video. This could be a Flash player, a link to download the video, or a message informing the user that their browser does not support video playback. You can implement a fallback option using the or tag within the

How can I control the appearance and functionality of my HTML5 video player?

You can control the appearance and functionality of your HTML5 video player using CSS and JavaScript. CSS allows you to style the video player, while JavaScript allows you to add custom controls and functionality, such as play, pause, volume control, and progress bar.

Can I use HTML5 video for live streaming?

Yes, you can use HTML5 video for live streaming. However, this requires a more complex setup involving a streaming server and potentially additional technologies such as WebRTC or Media Source Extensions. It’s also worth noting that live streaming support can vary between browsers.

What are some best practices for implementing cross-browser video playback in HTML5?

Some best practices for implementing cross-browser video playback in HTML5 include providing multiple video sources in different formats, using a fallback option for browsers that do not support HTML5 video, ensuring your video player is accessible and user-friendly, and testing your video playback across different browsers and devices.