Joomla Solutions Template

Supporting HTML5 video for your site wasn't straightforward, well, till now! Really, there isn't anything to effect.Modern browsers already support tag. All that you need to do is converts videos into HTML5 compatible formats and provide some control interface controls elements for the video. In this lesson I'll walk you thru the method in five straightforward steps. Lets Begin!

*Convert your video compression into HTML5 supported codecs Now, there are 2 main contenders here : H.264 and Ogg Theora.You must download a converter to help converter your video with one of those 2 codecs.I commended changing to both as Safari will not support Ogg Theora and Firefox will not support H.264. Here are some free resources that will help you convert your video in these formats : XVid4PSP (+ AviSynth), Miro Video Converter, Ogg Theora Converter. Choose the one which most closely fits your wants.

*Download an HTML5 video player There are already a considerable number of HTML5 video players available. Some of there are free and opensource offering different features and capacities like static image, playlists, browser note and flash fallback options, for example. Mostly jQuery based.Here are a selection of these players : JW Player, Kaltura, OSM Player, SublimeVideo I selected JW Player for this demo. But, the steps will be same for any other player you choose.Extract the zip file into appropriate location on your host server.

*Embed the player scripts in your internet site The player will have some javascript files to be included in your headers. JW Player also uses jQuery. Replace your flash video implant code with the video tag and supply the sources. You need to supply the width and peak of the player, a static image to be shown before the video is loaded and played as poster and then the locations of the video in mp4 (H.264) and ogv (ogg) formats.

*Add Flash fallback options for unsupported browsers in the event of JW player this is an exceedingly minor step.JW player has a flash player as a file player.swf. Simply a line should be added to the prior jQuery function call (Remember the comma between the skin and flashplayer)

*Add some branding and do customization there'll be differing types of customizations available for different players like emblems, skins, playlists. For JW player changing the skin parameter above can change the appearance of the player. Themes can be generated using jQuery UI theming tools like Themeroller. It is just an XML file.