Maintenance

  • Home
  • Log in
  • « Towards an HCMC policy for HTML5
  • Generating Ogg Theora video files from MP4s »

Integrating HTML5 video with older browsers

Posted by mholmes on 04 Nov 2010 in R & D, Activity log, Documentation

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).

This entry was posted by Martin and filed under R & D, Activity log, Documentation.

Maintenance

This blog is the location for all work involving software and hardware maintenance, updates, installs, etc., both routine and urgent.
  • Home
  • Recently
  • Archives
  • Categories

Search

Categories

  • All
  • Announcements
  • Hit by a bus
  • Labs
    • Activity log
    • Documentation
  • Notes
  • R & D
    • Activity log
    • Documentation
  • Servers
    • Activity log
    • Documentation
  • Tasks

All blogs

  • Academic
  • AdaptiveDB
  • Admin
  • Announcements
  • CanMys
  • Cascade
  • CGWP
  • ColDesp
  • Depts
  • DVPP
  • Endings
  • HCMC Blogs
  • Landscapes
  • LEMDO
  • Linguistics
  • Maint
  • LondonMap
  • Mariage
  • MoM
  • Moses
  • Pro-D
  • Projects
  • ScanCan
  • HumsSites
  • Wendat

This collection ©2026 by admin • Help • Complete website engine