HTML5 Video

I’ve been really busy over the last couple of months working on the new Jay-Be website and I am so pleased that we will be launching it this week (and so will my other clients). I’ve really enjoyed creating this one but its always nice to get a site finished and online.

This is my first project that I’ve used SASS and Compass with and I have to say its made developing the site a complete joy. It took me a few days to really start getting used to working with SASS but I won’t be going back. I just can’t believe I waited so long to start to use a pre-processor.

This is also the first site that I’ve not supported Internet Explorer 7. I’ve not supported 6 for a couple of years but looking at the usage figures for some of my other clients sites made the decision quite an easy one. I’ve been using Andy Clarkes text only style sheet for IE6 for a while but now IE7 users get this too. I didn’t want to just show them a text only site though as this could look broken so I take users to a unsupported page and prompt them to upgrade their browser.

The site also contains a lot of videos which I have posted to YouTube and Vimeo but we are hosting them on the site and using HTML5 with a Flash Fallback to play them. They are only short videos so the burden shouldn’t be too bad. I did look at using the YouTube HTML5 video player but it doesn’t appear to offer a Flash fallback which is no good for users with browsers that don’t support the HTML5 video element.

The code I’ve used for the Flash ballback is quite nice as it also includes the Express Install I’ve posted that below for those that are interesed.

HTML5 Video Embed Code, nothing special here although I have set the preload attribute to none. I have done this so the poster image shows in Internet Explorer 9. If you don’t do this the poster image just flashes up for split second and then IE9 just shows the first frame of the video. I have also used the trailing slash no longer required with the HTML5 doctype but I have read somewhere that this can cause issues if you don’t include it. I’ve not found this to be true but I’ve included just in case.

<video width="864" height="480" poster="product.jpg" preload="none" controls>
<source src="product.mp4" type="video/mp4">
<source src="product.webm" type="video/webm">
<source src="product.ogv" type="video/ogg">
</video>

The Flash fallback, to use this you must first load the jQuery library then, SWF Object and you must also have the Express Install swf.

<script>
jQuery(document).ready(function() {
   var v = document.createElement("video"); // Check if the browser supports the video tag
   if ( !v.play ) { // If no, use Flash.
      var params = {
         allowfullscreen: "true",
         allowscriptaccess: "always",
         wmode: "transparent"
      };

      var flashvars = {
         src: "http://www.domain/product.mp4",
         poster: "http://www.domain/product.jpg"
      };

      swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "the-video", "864", "480", "10.0.1", "express-install.swf", flashvars, params);
   }
   else {
      // fix for firefox not looping
      var myVideo = document.getElementById('the-video');

      if (!(typeof myVideo.loop == 'boolean')) { // loop supported
         myVideo.addEventListener('ended', function () {
            this.currentTime = 0;
            this.play();
         }, false);
      }
   }
});
</script>