Dealing with Non-Supporting Browsers

Contact Us or call 1-877-932-8228
Dealing with Non-Supporting Browsers

Dealing with Non-Supporting Browsers

The audio and video elements have been implemented to hide and ignore any unknown children, which means that we can throw code inside of them to be consumed/displayed by non-HTML5 browsers.

Code Sample:

<meta charset="UTF-8">
<title>HTML5 Video - controls</title>
<link href="style.css" rel="stylesheet" type="text/css">
<h1>HTML5 Video - controls</h1>
<video controls autoplay height="480" width="640">
	<source src="../Media/justin.mp4" type="video/mp4">
	<source src="../Media/justin.ogv" type="video/ogg">
	<p class="warning">Your browser doesn't support the video tag.</p>

If you don't have any non-HTML5-compliant browsers installed, you may wish to install IETester, which is a free tool for seeing how older version of Internet Explorer will display your pages.

Graceful Degradation

Because the code encapsulated within the HTML5 <video> and <audio> tags is not displayed, we can use that to gracefully degrade to Flash and then from there to an image.

Kroc Camen wrote a "chunk of HTML code" called Video for Everybody, which is freely reusable. The code is shown below (with the WebM format added in):

<!-- first try HTML5 playback: if serving as XML, expand 'controls' to 'controls="controls"' and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
	<source src=""__VIDEO__.webm" type="video/webm" /><!-- WebM Format -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the 'data' attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
			title="No video playback capabilities, please download the video below" />
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
	<strong>Download Video:</strong>
	Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
	WebM Format: <a href="__VIDEO__.webm">"WebM"</a>
	Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>