Currently, most websites provide video by progressive download or psuedo streaming. A method of delivering audio/video data over the Internet that involves playing the downloaded portion of a file while the download is still in progress. This means that larger files can often "buffer" - temporarily pausing the video while it downloads more for you to watch. Videos which are distributed via progressive download need to be properly compressed for the internet which can degrade the quality of the video and/or audio. This of course impacts on the overall viewing pleasure of the site visitor.
Alongside this, there are also compatibility issues. There are numerous browsers ( a program used to access the internet such as Internet Explorer, Mozilla Firefox, Opera, Netscape Explorer, safari etc). There are numerous versions of these browsers, and diferent types of hardware/machines that are using these browsers, from phones, to laptops, to macs to iPads. Consider all of these variables, and how they can be mixed and matched. This makes a compatibility nightmare, as distributing your video in one format, could mean that it can only be accessed one way, leaving some people unable to view it. For example flash video cant be viewed on iPads or mobile devices and Quicktime and WMVs need browser plug ins or entire downloads before viewing. Youtube have provided some advice on compatibility here http://www.youtube.com/html5
So what is HTML 5 video and why is it so great?
HTML 5 is the 5th version of the code used to write website pages on the internet. This new version includes the ability to distribute opensource video, which can be accessed by everyone simply using the new < video > tags. The latest versions of all browsers support HTML5.
HTML 5 video provides HTTP video streaming without buffering - there is no download needed - progressive or otherwise. This also means that you can jump around/click on any part of the video and it will immediately play from that point. In addition, as there is no download - you can distribute High Definition video files, which are quite large (watch your bandwidth quotas though!)
As HTML5 is still quite new (or at the time of writing this article it was), you would still need to provide a fallback to flash or other methods for people using older versions of browsers. An appropriate message should also accompany the video such as "The video above is in High Definition where available - click here for more information" and then provide a bit more information this.
Right, so you've read this much, Im guessing you now want to know how to do it?
So here's the code:
< video width="512" height="288" controls autoplay>
< source src="http://yourvideosource.mp4" type="video/mp4" />
< source src="http://yourvideosource.webm" type="video/webm" />
< source src="http://yourvideosource.ogv" type="video/ogg" />
< !-- fallback to Flash: -->
< object width="512" height="288" type="application/x-shockwave-flash" data="player.swf">
< param name="movie" value="player.swf" />
< param name="flashvars" value="autostart=true&image=poster.jpg&file=http:yourvideosource.mp4" />
< !-- NO PLAY BACK IMAGE -->
< img src="poster.jpg" width="640" height="360" alt="no video playback found" title="No video playback capabilities" />
< /object>
< /video >
[you need to delete the space after the initial '<'. Ive had to break the code so it will display rather than try to play]
Working example below:
Now you might have noticed some formats listed above that you've never seen before - such as OGG and WEBM. Well these are opensource video codecs. MP4 is opensource at the moment, but some developers dont like this as it uses the H264 codec which although is fantastic - it might not be opensource from 2012 and so its being avoided by Firefox. OGG is preferred by Firefox. Whereas Google Chrome likes WEBM. iPad will play the MP4.
Also, I mentioned above that bandwidth might be an issue for you. Especially if you are on a cheap hosting package. If this is the case, great news. Youtube have just released (at the time of writing) a HTML 5 video embed. This works on the principle of an iframe.
E.g. < iframe class="youtube-player" type="text/html" width="512" height="288" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">< /iframe>
Other video share sites such as Vimeo are likely to follow with their embed solutions shortly. Vimeo currently offers videos using HTML5 methods but no option to embed as yet.
Is HTML 5 going places?
Absolutely. We at Ossian Productions UK think this is set to revolutionise the way we watch video on the internet. High Def TV programmes and films HTTP streamed on demand. What can beat that? In addition, developers are already gearing up to provide some pretty slick looking HTML players - so theres no worries there that you wont be able to make it look as nice as your current flash based player. Take a look at this one here soon to be released: http://jilion.com/sublime/video
What is also great about HTML5 is that it allows for high definition video emails - played directly in the email programme which doesnt get blocked as it contains no scripts and nasties that the programmes dont like. Again this would require the latest versions of the email software to be installed by the recipient with a click to play in browser option of those on the lower versions, but imagine the possibilities of you promotional video in high definition mailed out effortlessly to current and prospective clients. Thats another reason why at Ossian Productions we're ready to roll with all HTML5 marketing solutions.
Love your video in high definition - the way it should be seen.
