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:
<!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>
<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" />
<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" />
</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:
<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.<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.If you are unfamiliar with any of the options for the <object>
and <embed>
tags, have a look
at http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.
html, which has a handy list of the attributes for each tag.