A key part of using the HTML5 <video> tag is that while the format is still evolving as a standard, it is still necessary to provide some form of fallback support for older browsers that cannot support the tag. In this task, we will look at providing that support.
In order to get the best out of this task, you will need to avail yourself of some means to be able to view your video pages within an older browser. There are several ways to achieve this, depending on which browser you choose:
Adobe BrowserLab : This will allow testing in various versions of IE, Chrome, Safari, and Firefox.
Firefox Portable (http://portableapps.com/apps/internet/firefox_portable): This will allow you to install a standalone version of Firefox, which won't affect any existing profiles on your PC. Legacy versions are available for older browsers.
For Internet Explorer: The best option here is to try using IETester; this has versions of IE built in all the way from 5.5 up to version 9. This is available for download from http://www.my-debugbar.com/wiki/IETester/HomePage.
Lunascape 6 (from http://www.lunascape.tv/): This is a triple-engined browser with support for Trident (IE), Gecko (Firefox), and Webkit (Chrome and Safari)-based browsers.
To begin, open up your favourite text editor and copy in the following code snippet:
<!doctype html> <html> <head> <title>HTML5 Video Test</title> </head> <body> <video width="720" height="400" controls="controls" poster="trailer_480p.jpg"> <source src="trailer_480p.webm" type="video/webm" /> <source src="trailer_480p.mp4" type="video/mp4" /> <source src="trailer_480p.ogv" type="video/ogg" /> </video> </body> </html>
Over the following three steps, we will create a fair amount of code beginning with the embedding of the
<object>tag. Add in the following section of code immediately below the last<source>tag:<object type="application/x-shockwave-flash" data=flashfox.swf" width="720" height="400" style="position:relative;"> <param name="movie" value="flashfox.swf" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="autoplay=true&controls=true&loop=true&src=trail er_480p.mp4" />
We also need to add in the equivalent using the
<embed>tag immediately afterwards:<embed src="flashfox.swf" width="720" height="400" style="position:relative;" flashVars="autoplay=true&controls=true& loop=true&poster=trailer_480p.jpg&src=trailer_480p.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/ getflashplayer_en" />
The last stage is to add in a background image, and fall-back text; we then finish with the closing
</object>tag:<img alt="trailer_480p" src="trailer_480p.jpg" style="position:absolute;left:0;" width="720" height="400" title="Video playback is not supported by your browser" /> </object>
The aim of the code is to provide fallback support for displaying a Flash-equivalent movie; this is achieved by using a SWF-based container from which we run the MP4 file that would otherwise be run from within the <video> source tags. We also include a plain image and set a title attribute for it—this will be the "last-call" route that the browser will take if it is unable to play any of the videos listed within the code.
While the previous code will work as a fall-back for the HTML5 video, there are some points to note:
The
<embed>tag is actually not a valid tag—it was designed to provide support for Netscape browsers in the early days, but more modern versions do support the<object>tag. The<object>tag was designed to provide support for IE browsers.The
<object>tag is valid within HTML5—as a minimum, this should be used when providing fall-back support; I have provided an example for using the<embed>tag as well, although this is optional.