Fallback options for HTML5 video

The HTML5 <video> element only works on a few, often bleeding edge, browsers. For tinyvid I've been only supporting this subset of browsers. Recently I put in support for a simple fallback option for other browsers.

In browsers that don't support <video> the element is ignored. The contents of the element are still processed however. This means any HTML elements within <video>...</video> will display to the user on those browsers. The most basic fallback option is to tell the user that their browser doesn't support video:

<video>
  <p>pSorry, your browser doesn't support the video element<p>
</video>

In my blog in the past I've used the video element to display the Theora video, and fallback to a YouTube hosted video if the browser doesn't support it. This was done with code like:

<video src="/video_bling.ogg" controls>
  <object width="425" height="350">
    <param name="movie" 
              value="http://www.youtube.com/v/vvtdkxCIKC8"></param>
    <embed src="http://www.youtube.com/v/vvtdkxCIKC8" 
              type="application/x-shockwave-flash" 
              width="425"
              height="350"> </embed> 
  </object>>/video>

On <video> enabled browsers this uses built in support. On others it uses the Flash player to play the YouTube video.

It's possible to play Theora videos using a Java Applet called Cortado. This can be used as a fallback for users that have Java support but no HTML5 video support:

<video src="test.ogg" controls>
  <applet code="com.fluendo.player.Cortado.class" 
             archive="cortado.jar" 
             width="320"
             height="240">
    <param name="url" value="test.ogg"></param>
    <param name="duration" value="229.015"></param>            
  </applet>
</video>

The Cortado applet cannot be used for video's hosted on another domain however. They must be on the same domain as that serving the cortado applet.

These fallback options don't allow creating your own controls with JavaScript and using the nice HTML5 media API. They work best when you only want a single fallback option and use the built-in controls.

There are JavaScript libraries that can be used to emulate the HTML5 media API. Or you can write a simple wrapper to do this yourself. The basic approach is to use <video> in your page and insert a JavaScript file at the top. When loaded this fill searches the document for usages of <video>. It detects what capabilities the browser has (native video support, Flash, Cortado, mplayer/vlc plugin, etc) and replaces the <video> element with the correct HTML code to instantiate the fallback. The JavaScript can then create a wrapper object that emulates the HTML5 API and calls the underlying plugin methods, etc if possible.

Examples of this type of library can be seen in use:

• mv_embed
• Xiph.org presentations
• Steal This Footage

I've added very simple fallback to tinyvid using the Cortado applet. If the browser doesn't support <video> it displays a link the user can click to go to a page that uses the applet. The server decides whether to use native video or the applet depending on a URL parameter. Here's a link to a native video player, and the applet version:

• Native Video
• Cortado Applet

For the applet version the server queries the Ogg file for the width, height and duration of the video so it can embed that data in the applet parameters. In some cases I can't get the width and height. This is due to some of the videos being stored on backup storage (via Amazon S3) and I can't locally analyze it to get the data. In that case the applet dimensions are set to 320x240.

Categories: video