html5flash: Using HTML5 video and audio right now (with a Flash video fallback)
There has been some discussion lately on the best way of implementing HTML5 video. Laura Thomson started the discussion by describing for using HTML5 video with fallbacks to other formats. Laura's solution consists of detecting the availability of HTML5 video using Javascript. If this tag exists, it will be inserted dynamically into the page, if not, a Flash-based fallback will be added.
This caused a prompt response by Kroc Camen and others in an open letter , no less. The points of criticism are lack of accessibility, lack of security, and most important by treating video as a Javascript feature, the document nature of an HTML page is ignored, making it hard for alternative user agents (something that browser vendors sometimes forget) to deal with the multimedia content correctly, which disables mashups and aggregations. Kroc proposes an alternative solution, called Video for Everybody , which uses the HTML5 video element, with a contained object element that embeds a Flash-based video player as a fallback. This flash player has another fallback, namely Quicktime. If this fails, download links to the video are offered.
While this solution offers the broadest compatibility, does not require Javascript and deals with all the issues mentioned in the original open letter, it does not fulfill the sense and promise of the HTML5 working draft. This working draft specifies more than just a simple video (and an audio) tag, that works like the img tag. HTML5 acknowledges that audio and video are multimedia content that provokes a user interaction and offers the ability to control video playback, implement own controls and register event listeners. It even provides a sophisticated model for source selection that deals with the fact that there is not a single cross-platform, cross-vendor video format for the web.
Neither the Video for Everybody approach nor the original Mozilla proposal seem to recognize this fact, but it is critical for every web developer who wants to embed video into a web application and control the playback. In the Mozilla example this means dealing with two separate APIs, in the Video for Everybody case, it would be 3 or more APIs, with the limitation that the current state provides for only the HTML5 API. Not only will this lead to additional effort for the developers, it will also limit the adoption of HTML5, because it is just another API for video.
For the last week I have been working on a third solution, which is called html5flash , a small Apache-licensed Javascript library that will wrap a Flash video or audio player and expose the HTML5 mediaobject API. This means nearly all attributes, properties, event listeners and Javascript functions of the current working draft are supported, which allows developers to create HTML5 video and audio applications right now, without the need to rely on a proprietary API. Of course, there are still a number of limitations, but the source code is available from github , so that any interested developer can fork the project and contribute.
The technical solution is based on the work and ideas of many people. It works by a technique called gradual enhancement that was introduced to a wider group of web developers by Dean Edward's IE7 script, which fixed many of IE6's glitches, so they could use advanced CSS at a time when only Firefox and Opera would have proper support out of the box. html5flash will detect all video and audio tags in the HTML document and find out wether the browser supports HTML5 already, in which case nothing is done. For browsers that do not support HTML5 already, a wrapper object will be created that implements the HTML5 video and audio spec, making all methods, properties and event handlers available to the developer. Then, the script uses Scott Schiller's soundmanager2 library to create a Flash-based audio or video player. Again, this is not a new idea, actually Mike Chambers, product manager at Adobe has shown how to do it before.
What does this mean for developers? They have now three ways of using HTML5 right now, with the ability to provide workable fallbacks for the 98% of web surfers that do not have an HTML5-capable browser yet, but Adobe Flash installed. The simplest html5flash solution would look like this:
<!DOCTYPE html >
<html>
<head>
<title>Video Example</title>
<script type="text/javascript" src="soundmanager2.js"></script>
<script type="text/javascript" src="html5flash.js"></script>
</head>
<body>
<div id="sm2-container"></div>
<video
src="media/video.flv"
controls="true"
width="416"
height="336"
poster="media/video.jpg"></video>
</body>
</html>
You still have to provide multiple video formats, namely FLV or M4V for Flash, MOV or M4V for Safari 4 and OGG for Firefox 3.5, but with html5flash you have one simple way of embedding video and audio together will full control using the HTML5 mediaelement API.
Comments [7]