Above we have a video tutorial, if you don’t like video then I have also written it up below.

As soon as you mention HTML5 its not long before someone mentions Video. That’s because HTML5 now enable you to put video in your web pages without the need for a plugin like flash.

To test HTML5 video Sky News produced this concept page, as you can see as the mouse moves around the site different stories come into view from the left and right.

If you click on the image the video zooms into view. Now all of the controls on this video, like the play button, the timebar and the volume are all custom. You can build custom controls for videos by using a little CSS and JavaScript.

Sky News have actually used a third party video player but we are going to build ours from scratch

If we press F12 in IE9 and use the developer tools to look at the code we can see the playbutton is just a div div layer which has probably had a background image set.

The video is simply an image placeholder. What sky do is when you click the image they fire off some JavaScript that zooms the image and then creates a HTML5 video player dynamically using JavaScript.

The third party HTML5 video player they use is called VideoJs which you can find at http://www.videojs.com.

Now The player I have created for this demo is a lot simpler.

When we hover over the play icon fades out then when we click the video it zooms in and starts playing. If I click the video again it stops playing and zooms back out again.

The basic video tag is quite straight forward.

We have an ID to identify the tag using JavaScript and a Height and width attribute to declare the dimensions. We also have a tag called poster, this point to a JPEG which will be placed on the screen before the video has loaded as a place holder. Lastly we have a preload attribute, I have set it to none which will mean that the video will not attempt to buffer.

If you want you can add a controls attribute to this tag that will add a play button a timeline and various controls to the video but for the purposes of this demo we are going to switch them off as we want to build our own controls

Sadly there is no consensus on what codec should be used to play videos and therefore if we want to support as many browsers as possible we potentially need to use a number of different vide sources.

The Browser will go through each source until it finds one it can play.

Firstly we have an mp4 source, this uses the H.264 video and will play in safari and the desktop and iPad and iPhone and is also supported by IE9.

Next OGG Theora,  which will play in Opera, Firefox and Chrome

And lastly WebM which is supported by IE9, Chrome, FireFox and Opera.

If a browser isn’t capable of supporting html5 it will show fall back text, the fallback text could be a link to the video for download or maybe a flash video object

Now I’m going to use JavaScript in this demo, so to make things easy I’m going to add a reference to jQuery

Now back at the HTML I’m going to add a div which is going to be my play button, I will give it the class of playButton.

Then I will add a div that wraps the video and the playbutton to make it easier to style. And on the div I’m going to add an onclick event so that when the layer is clicked we are going to call the JavaScript function playButton()

Next I will add a CSS class called playButton to style the button.

I have used an  RGBA background colour, t0.9 setting on the alpha channel, will make the background slightly transparent

Then I will add a CC pseudo class so that when we hover over the video container the play buttons background become even more transparent:

Up the top I have added the JavaScript function called playButton, this is what is called by the onclick event that we added earlier.

This function gets a reference to the video object and if it’s paused it changes the buttons text to read loading.

I then use jQuery to animate the width and height of the video object and the video container. This gives the effect that the video is zooming.

I then tell the video to start playing. And then finally I fade out the play button from sight.

Now if the video is not paused. I.e it’s playing

Firstly I pause the video

I then animate the videocontainer and the video object back to their original size. I set the playbuttons text to play and finally I fade the playbutton back into view.

If you want to learn more about HTML check out the videos at http://www.ubelly.com/html5 and we have also got a few sample chapters from a great HTML5 book that you can find here http://ubel.ly/html5BookSample

Above we have a video tutorial, if you don’t like video then I have also written it up below.

In the last video tutorial we showed how Sky News built a HTML5 Video Experience, in this video we are going to show how they used Feature Detection and how we can use it to improve the demo we created in the previous tutorial.

In the Preview Versions of IE9 there was no support for CSS2D Transforms, but we knew it was coming.

Sky wanted to use 2D transforms to get a Zooming and scrolling effect.

So sky used feature detection to test the browser to see if it was capable of using CSS2D transforms. If if it wasn’t they would fall back to an alternative JavaScript way of producing the same effect.

Now in our video demo this is very useful because we can use JavaScript feature detection to determine if the browsers can support HTML5 video and if it doesn’t we can do something fancy with JavaScript to fall back and ensure our users still have a great experience.

Now I’m going to use the F12 IE9 Developer tools (just press F12) to show you what it is like if you visit the video demo in a browser like IE8 which doesn’t support HTML5 Video.

As you can see the video is just ignored.

There is a basic way to solve this issue.

We can sort of fix this by adding in a youtube iframe tag. In just after all of the video sources in the video tag.

If we look at the demo again and change the browser mode to IE8 you will now see that the HTML fallback kicks in and we now have at least a video on the page.

But what if you want more granular control. What if you want to do something more fancy.

Well I’m going to use this library called Modernizr.

Modernizr is a JavaScript library that makes feature detection easy by having tons of little tests that can determine if a browser can support various HTML5 and CSS3 technologies.

I download the Library from their website to my local machine. I will then add the script reference to the page .

Then I will add a jQuery on ready function. When the browser has loaded it’s going run whatever is in this section.

The code basically says If modinizer.video or in other words if the browser supports HTML5 Video then hide the youtubeVid and show the videoContainer. But if HTML5 is not supported, show the youtubeVid and hide the videoContainer.

Then just before the videoContainer insert some text to says you should get a HTML5 capable browser.

So now when we view the demo and Change the document mode to IE8 we now not only have the flash fallback but we have also inserted the text correctly.

Now modernizer tests for all sort of features like Canvas, GeoLocation it is also possible to use it to control CSS logic if you want to find out more you should check their documentation.

This post contains a simple example which I recreate in the video.

The video describes the fundamentals of how to create this type of experience using standard consumer photographic equipment (digital camera, tripod) and a free tool called Microsoft Image Composite Editor that stitches together the raw images and (optionally) generates a Deep Zoom Silverlight application.

The resulting application can be embedded on a web page. Importantly there’s no requirement to host in IIS or use ASP.NET, the Silverlight application can be hosted on pretty much any web server and any type of web page (HTML, PHP etc etc). This opens up the possibility to embed extremely rich content irrespective of the web stack or framework at the heart of your application.

I’ll start with this post in which I describe a Deep Zoom application that allows you to explore an overall image (some form of merchandise in the retail scenario) and embed regions of extremely high detail that can be explored. A typical example might be a jacket or a pair of jeans where you can roam around the item and seamlessly drill down into pocket / stitching / label details etc. The post contains a simple example which I recreate in the video.

The video describes the fundamentals of how to create this type of experience using standard consumer photographic equipment (digital camera, tripod) and a free tool called Deep Zoom Composer that allows you to combine the raw imagery and generate the Deep Zoom Silverlight application.

The resulting application can be embedded on a web page. Importantly there’s no requirement to host in IIS or use ASP.NET, the Silverlight application can be hosted on pretty much any web server and any type of web page (HTML, PHP etc etc). This opens up the possibility to embed extremely rich content irrespective of the web stack or framework at the heart of your application.