The City Talks website has lecture videos, and we've been working on finding the optimal way to provide both HTML5 support, using the <video> tag, and support for legacy browsers (in particular IE8). This is the strategy I've worked out so far. It's based on browser-sniffing, simply because I know of no way to detect support for a particular HTML tag, and in reality, the only legacy browser we really care about is IE8. I'm using the JWPlayer Flash video player as a fallback for IE8 and below.
First, determine if you have an old version of IE, using PHP, and send the appropriate mime type (we prefer xhtml if possible):
<?php $ieVer = ieVersion();
if (($ieVer > -1)&&($ieVer < 9)){
header("Content-type: text/html;charset=utf-8");
}
else{
header("Content-type: application/xhtml+xml;charset=utf-8");
}
function ieVersion() {
$match=preg_match('/MSIE ([0-9]\.[0-9])/',$_SERVER['HTTP_USER_AGENT'],$reg);
if($match==0)
return -1;
else
return floatval($reg[1]);
?>
The main content of the document is standard HTML5, using the simple doctype recommended, and is conformant XHTML. If we do have an old browser, we need to link a script file that the JWPlayer will need, in the header:
<?php if (($ieVer > -1)&&($ieVer < 9)){ ?>
<script type="text/javascript" src="jwplayer/jwplayer.js">
</script>
<?php } ?>
Finally, on the page itself, we fork the output, providing the JWPlayer for IE8 and below, and a standard HTML5 <video> tag for the other browsers:
<!-- If it's IE8 or below, use the JWPlayer. -->
<?php if (($ieVer > -1)&&($ieVer < 9)){
?>
<div id="jwVideoPlayer">Loading the player ...</div>
<script type="text/javascript">
jwplayer("jwVideoPlayer").setup({
flashplayer: "jwplayer/player.swf",
file: "../media/<?php echo $vid; ?>.mp4",
height: 224,
width: 400
});
</script>
<!-- Otherwise use HTML5. -->
<?php } else { ?>
<video controls="controls" width="400" height="224">
<source src="media/<?php echo $vid; ?>.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="media/<?php echo $vid; ?>.mp4" type='video/mp4; codecs="avc1, mp4a"'/>
<p><a href="media/<?php echo $vid; ?>.mp4">Download the video</a>.</p>
</video>
<?php } ?>
You'll notide that the video file name is being supplied from a PHP variable (this is passed to the page along with the title, in the GET array). Also, you'll see that there are two versions of the video, an MP4 for browsers which can support it, and an Ogg Theora file for e.g. Firefox, which doesn't support H.264.
This approach is tested and working on current versions of Firefox, Chrome and Opera, along with IE8 (which uses the JWPlayer) and the IE9 beta (which uses HTML5).
