Monday, 8 July 2013

Working with HTML5 video

HTML5 video has been around for a while now, but it can still be a problem to work with when trying to achieve cross-browser compatibility. In this blog post I hope to help you add HTML5 video to your sites with the minimum of effort.

There are a lot of different HTML5 video formats that are supported by the various browsers out there, and in some cases your users may still be working with older versions of Internet Explorer which doesn't support any HTML5. Despite this my findings have been that you don't need to provide all of those versions as many browsers will happily work with multiple HTML5 video formats.

In order to provide both HTML5 video and a fallback for older browsers to Flash you will need to create the following video files: mp4, webm and FLV or SWF. But, a word of warning before you start encoding. The mp4 video must be created in a very specific way in order to be compatible with Internet Explorer 9 and 10.

When I work with video I now use Free Studio Manager from DVDVideoSoft. This piece of free software will allow you to convert video into multiple formats suitable for all types of devices - DVD, Mobile, YouTube etc. I use the DVD & Video option to convert videos. For your webm video, which will play on Firefox, Opera and Chrome, make sure that you use the webm container with VP8 video and Vorbis audio options. For mp4 video, which will play on all browsers with the exception of Opera, you will need to be careful to make sure that you use the mp4 container with H.264 video and mp3 audio. You may find that you need to create a new preset for this format. It is important that you use these options only as any others will not play in Internet Explorer.

Once your video files have been created, including your Flash fallback, you can place them on your webpage. Again, you need to use a specific order for your HTML code - place the webm first, then the mp4 and finally the Flash.

Sample code:
<video controls width="510">
<source src="assets/videos/html5video.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- if Safari/Chrome--> 
<source src="assets/videos/html5video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. --> 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="510" height="328" id="flashvideo" align="middle">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flashvideo.swf" width="510" height="328">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
You should now have a fully functioning HTML5 video page that will automatically display the correct video format for the user's browser.