While HTML5 has been around for a few years now (Firefox support began in 2007) and modern browser support is nearly universal, some browsers will still throw up their hands and not know how to handle those <video> tags when parsing a page. If video IS supported, the waters are further muddied in that different browsers support different codecs. There isn’t even one universally-supported format either: Safari only supports h.264 while Firefox supports VP8 and Ogg Vorbis. For all of these cases, graceful handling is important.
Unrecognized tags are ignored, so to gracefully handle when video tags aren’t recognized just pretend they aren’t there while writing markup. The below code will output a text warning if the browser doesn’t support video:
<video id=”vid1″ name=”vid1″ width=”480″ height=”267″ controls >
<p>Your browser does not support video</p>
</video>
Here we are, the most basic, stripped down video tags you can get. It doesn’t even know what video to play, but if a browser doesn’t know what a “video” is, it certainly knows what a “p” tag is and will output what’s between them. You can put nearly anything in there and video will take precedence over it if HTML5 video is supported (except <script>, those will still run), so fallback to a Flash player is easy and simple. Just put the following between the <video> tags and you are guaranteed to provide the opportunity for a media-rich experience to any user.
<!– “Fallback” to using Flash if video is not supported –>
<!– Required for Mozilla < 3.0, Opera < 10.5, Safari < 3.1 –>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”550″ height=”400″>
<param name=”movie” value=”../Escape.swf”>
<!– Required by IE browsers –>
< embed src=”../Escape.swf” width=”550″ height=”400″ > </embed>
</object>
In the event that video isn’t supported, the “Escape.swf” Flash movie will play instead. How to do this too varies by browser, but copying and pasting the above code will work in all major browsers. Internet Explorer requires the tag, while Firefox and other browsers require the <object> tag, with each ignoring the other tag. When using the <object> tag, the UUID for the installed Flash plugin must be given. This is an unchanging value unique to Adobe’s plugin and can be copied without modification as well.
Given that all but one of the 5 major browsers currently support HTML5 video (with the fifth one, IE, implementing it in the current beta), lets assume the browser knows about the video element. How to account for if the browser doesn’t support the video format? The HTML5 video tag makes this easy: just specify a list of possible video sources and the browser will try each in sequence until it finds one compatible. Each of these are specified in a <source> tag, which are children of the <video> tag.
<video id=”vid1″ name=”vid1″ width=”480″ height=”267″ controls >
<!– Default video and encoding –>
<source src=”http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv” type=”video/ogg”>
<!– “Fallback” codec, will play when Ogg isn’t supported (Safari) –>
<source src=”http://mirrors.creativecommons.org/movingimages/Building_on_the_Past.mp4” type=”video/mp4″>
</video>
Putting it all together we get a fail-safe system to fallback to Flash plugins (or a warning message) if <video> isn’t recognized, or we get a format-by-format fallback sequence until the browser can find a <source> that it knows how to work with:
<video id=”vid1″ name=”vid1″ width=”480″ height=”267″ controls >
<!– Default video and encoding –>
<source src=”http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv” type=”video/ogg”>
<!– “Fallback” codec, will play when Ogg isn’t supported (Safari) –>
<source src=”http://mirrors.creativecommons.org/movingimages/Building_on_the_Past.mp4” type=”video/mp4″>
<!– “Fallback” to using Flash if video is not supported –>
<!– Required for Mozilla < 3.0, Opera < 10.5 –>
<object classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ width=”550″ height=”400″>
<param name=”movie” value=”../Escape.swf”>
<!– Required by IE browsers –>
< embed src=”../Escape.swf” width=”550″ height=”400″ > </embed>
</object>
</video>
With this we have a completely safe cross-browser way of implementing functionality (as best possible) promised by the HTML5 standard. The standard doesn’t go so far as to say how UI elements such as play/pause/stop controls must be rendered. Standardizing that though, is a subject for another blogging.
Leave a Reply