Javascript libraries for support

Now that Firefox 3.5 is released with native HTML5 <video> tag support, it seems that there is a new javascript library every day that provides fallback mechanisms for older browsers or those that do not support Ogg Theora.

This blog post collects the javascript libraries that I have found thus far and that are for different purposes, so you can pick the one most appropriate for you. Be aware that the list is probably already outdated when I post the article, so if you could help me keeping it up-to-date with comments, that would be great. 🙂

Before I dig into the libraries, let me explain how fallback works with <video>.

Generally, if you’re using the HTML5 <video> element, your fallback mechanism for browsers that do not support <video> is the HTML code your write inside the <video> element. A browser that supports the <video> element will not interpret the content, while all other browsers will:


<video src="video.ogv" controls>
Your browser does not support the HTML5 video element.
</video>

To do more than just text, you could provide a video fallback option. There are basically two options: you can fall back to a Flash solution:


<video src="video.ogv" controls>
<object width="320" height="240">
<param name="movie" value="video.swf">
<embed src="video.swf" width="320" height="240">
</embed>
</object>
</video>

or if you are using Ogg Theora and don’t want to create a video in a different format, you can fall back to using the java player called cortado:


<video src="video.ogv" controls width="320" height="240">
<applet code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="320" height="240">
<param name="url" value="video.ogv"/>
</applet>
</video>

Now, even if your browser support’s the <video> element, it may not be able to play the video format of your choice. For example, Firefox and Opera only support Ogg Theora, while Safari/Webkit supports MPEG4 and other codecs that the QuickTime framework supports, and Chrome supports both Ogg Theora and MPEG4. For this situation, the <video> element has an in-built selection mechanism: you do not put a “src” attribute onto the <video> element, but rather include <source> elements inside <video> which the browser will try one after the other until it finds one it plays:


<video controls width="320" height="240">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
</video>

You can of course combine all the methods above to optimise the experience for your users, which is what has been done in this and this (Video For Everybody) example without the use of javascript. I actually like these approaches best and you may want to check them out before you consider using a javascript library.

But now, let’s look at the promised list of javascript libraries.

Firstly, let’s look at some libraries that let you support more than just one codec format. These allow you to provide video in the format most preferable by the given browser-mediaframework-OS combination. Note that you will need to encode and provide your videos in multiple formats for these to work.

  • mv_embed: this is probably the library that has been around the longest to provide &let;video> fallback mechanisms. It has evolved heaps over the last years and now supports Ogg Theora and Flash fallbacks.
  • several posts that demonstrate how to play flv files in a <video> tag.
  • html5flash: provides on top of the Ogg Theora and MPEG4 codec support also Flash support in the HTML5 video element through a chromeless Flash video player. It also exposes the <video> element’s javascript API to Flash content.
  • foxyvideo: provides a fallback flash player and a JavaScript library for HTML5 video controls that also includes a nearly identical ActionScript implementation.

Finally, let’s look at some libraries that are only focused around Ogg Theora support in browsers:

  • Celt’s javascript: a minimal javascript that checks for native Ogg Theora <video> support and the VLC plugin, and falls back to Cortado if nothing else works.
  • stealthisfilm’s javascript: checks for native support, VLC, liboggplay, Totem, any other Ogg Theora player, and cortado as fallback.
  • Wikimedia’s javascript: checks for QuickTime, VLC, native, Totem, KMPlayer, Kaffeine and Mplayer support before falling back to Cortado support.

8 thoughts on “Javascript libraries for support

  1. Hi Dan,

    Can you leave a more detailed explanation what differentiates video4all from the others? I found it rather difficult to do this, but I’m more than happy for you to add this in a comment!

    Thanks,
    Silvia.

  2. Hi Silvia, I just recently came across the video4all project, so I am not able to comment much on it.

    All I can say is that all these solutions really are just fallback solutions: they allow users to view a video (which is great in itself) but they do not implement all the fundamental behaviors, accessibility features, visuals, etc. of the standardized (-to be) ‘video’ element.

    These hacks serve a purpose for the time being by filling a gap in browsers vendors, but hopefully they will become obsolete soon 🙂

    Otherwise, it’ll be just another way to interface with existing video playback facilities (e.g. Silverlight, Flash, Quicktime, etc.), which misses the whole point of having a uniform video experience across platforms.

    /Dan

  3. Hi Dan, ah – I thought it was yours – apologies.

    Actually, the html5flash project actually tries to implement the javascript API that HTML5 exposes for <video> to the flash player, too. So, that is not just a hack, but trying to integrate it properly.

    For most of the others, you are right – they make sure the video playback works, which is good, but not all the way.

    Let’s hope we can all move to Theora in the near future!

    Silvia.

  4. I’ve not tested this but I was under the impression that Safari supports a subset of codecs from Quicktime (this is how you can sneak Theora/Vorbis in with a codec plugin). And that Chrome, while it includes ffmpeg and could in theory support all sorts of things, only has Theora/Vorbis and H.264/AAC compiled in.

    So this sentence seems backward “Safari/Webkit only supports MPEG4, and Chrome supports both of these and more”

    Regarding your question to Dan, video4all appears to use browser specific javascript extensions, so in theory it could do more clever stuff than a cross-platform javascript (which is what it falls back to in other browsers) but I admit to being curious about what the actual benefits of this are in this case.

Leave a Reply

Your email address will not be published. Required fields are marked *