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.
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">
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"/>
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" />
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.
Finally, let’s look at some libraries that are only focused around Ogg Theora support in browsers:
in response to:
“several posts that demonstrate how to play flv files in a tag.”
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!
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.
Hi Dan, ah – I thought it was yours – apologies.
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!
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”
David – thanks for noticing – will correct the blog post. Silvia.
Comments are closed.