Bluish Coder

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>Sorry, your browser doesn't support the video element
</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.