Video That Plays Everywhere:
HTML5 (MPEG4 & Ogg) + Flash

In our previous post on HTML5 video, we explained how HTML5 once offered hope for a consistent way to play video on the web, but that a schism over video codecs has made this impossible. Fortunately, it isn't too hard to work around the issues, and in this post we delve into the code you'll need.

At its purest, the HTML5 video tag is a beautiful thing:

<video width="640" height="360" src="/video/videofile.mp4"></video>

This will give you a player without any controls, which isn't too useful since you can't start the video unless you use JavaScript. But you can add those easily enough:

<video width="640" height="360" src="/video/videofile.mp4" controls></video>

This tells the browser to provide its default video controls.

You can add attributes to specify if the file should be preloaded, and if it should auto-play or loop. You can also specify an image to use for the poster frame, and more: see the HTML5 spec for full details.

Supporting Multiple Video Codecs

Unfortunately, this lovely one-line video tag is useful today only if are willing to exclude all Firefox users, not to mention IE users, from seeing your video. Or you could include Firefox users and exclude Safari users (including iPads and iPhones). Sadly, there's no clear prospect for this situation to improve in the next five or ten years.

The problem is that Apple will only support MPEG-4/H.264 video, and Mozilla will only support Ogg/Theora (as described in my previous introduction to HTML5 video). Google's WebM format looks like it might be supported by everyone except Apple, but so far Apple is saying "no".

As a result, you need to specify (and provide) multiple source files. Using the two-part form of the video tag, you can use "source" tags to define as many video sources as you'd like. The browser will work down the list until it finds one it can use.

Here's the code to provide two file types that will cover nearly all the browsers that support HTML5 video:

<video width="640" height="360" controls>
  <source src="/video/videofile.mp4" type="video/mp4" />
  <source src="/video/videofile.ogg" type="video/ogg" />
</video>

iPad/iPhone and Firefox HTML5 Video Issues

There's two other points you'll need to pay attention to in order to get all this to work.

1. According to the spec, the order shouldn't matter, but today the iPhone and iPad don't play the video unless the mp4 file is listed first, which makes the order of the source declarations important.
2. Your web server configuration needs to provide the proper MIME-type (video/ogg) for Ogg video. (If the video plays in Chrome, but not in Firefox, check your server's MIME-type settings.)

If you are building sites with the Webvanta web CMS, this is taken care of for you. If you are running your own server, you'll need to set the mime types. If you are using Apache, you can add the extensions used by Theora video files (".ogm", ".ogv", and ".ogg") to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache", or via the "AddType" configuration directive in httpd.conf.

Fallbacks for Older Browsers

Now, what about browsers that don't support any form of HTML5 video—such as all versions of IE through IE8, as well as older versions of Firefox, Safari, and Chrome?

The video tag has a clever feature: if the browser cannot use any of the source files listed, the HTML code following the source statements will be processed; but if the browser can play any of the source files, it will skip all following code inside the video tag. So you can treat all your non-HTML5-capable visitors rudely with just one more line of code:

<video width="640" height="360" controls>
  <source src="/video/videofile.mp4" type="video/mp4" />
  <source src="/video/videofile.ogv" type="video/ogg" />
  <h2 style='color:red'>Sorry, your browser does not support HTML5 video</h2>
</video>

Here's an example of this code. If your browser supports HTML5, you should see the video; otherwise, you'll see the text message:

Assuming you are not ready to block more than half of all web users from seeing your video, you can insert the code for a Flash video player after the source statements, and the Flash player will be activated only if the browser cannot play any of the source files. Browsers that don't support HTML5 video will ignore the HTML elements they don't understand, so they skip the HTML5 tags and run the Flash video.

Here's the code to show HTML5 video if the browser supports either mp4 or ogv, and, if not, to show the video in a Flash player. (In this case, we've put in the code for using Flowplayer, a Flash video player that is invoked using JavaScript. You must also have the Flowplayer JavaScript library loaded, which we've done at the start of this code; you may prefer to load it in the head section of the page.)

<script src="/flowplayer/flowplayer-3.1.4.min.js"></script>
<video width="640" height="360" controls>
  <source src="/video/videofile.mp4" type="video/mp4" />
  <source src="/video/videofile.ogv" type="video/ogg" />
  <a href="/video/videofile.flv" id="player"></a>
  <script type="text/javascript">
    flowplayer("player", "/flowplayer/flowplayer-3.1.5.swf");
  </script>
</video>

Compared with a Flash-only solution, this takes twice as many lines of code, requires three video files instead of one, and is harder to style consistently. On the plus side:

• The video now plays on iPads and iPhones.
• Firefox and Chrome users no longer need to have Flash installed.
• When you no longer care about any browsers that don't support HTML5 video—probably around 2020—you'll be able to delete the Flash player code.

Here's a live version of the code above, with the Flash option included. If you're using any browser other than IE, you should see the HTML video below; if you're using IE, you should see the Flash video.

If you're determined to avoid Flash, you can use a Java applet to play Ogg video. This trades the requirement for Flash to a requirement for Java, which is unquestionably worse from a typical user experience perspective.

HTML5 Video Players

One issue with the built-in HTML5 video player controls is that they are provided by each browser, and there's no way to style them.

There is a JavaScript API for controlling HTML5 video, so you can build your own controls using whatever images you want, and use JavaScript events to, for example, start and stop the video.

Of course, this makes the required code much more complex than using the built-in controls. And you still need a Flash version as well.

Because of this complexity, even though you can create your own HTML5 video player with the simple code above, there's an opportunity for software developers to create players that, ideally, deliver a consistent, skinnable visual appearance in all the common browsers.

There's a variety of HTML5 video player projects that aim to meet this need. Here's a partial list; many are in beta or prerelease as of this writing.

• Video JS: Skins defined in CSS, without images.
• SublimeVideo: Stand-alone JavaScript-based player.
• Projekktor: Open-source, JavaScript-based player with Flash fallback.
• JW Player: Open-source player, uses jQuery and PNG images for controls; falls back to JW Player for Flash, which uses the same images for skinning the controls.

Additional Resources

Take a look at our HTML5 Resources page for links to many sources of additional details.

Here's a short list of HTML5 video resources:

• HTML5 video tag specification
• Video for Everybody
• HTML5 Video Markup
• HTML5video.org