Latest Trends
Supporting HTML5 video for your site was never easy, well, until now! Actually, there is nothing to implement. Modern browsers already support <video> tag. All you need to do is convert your videos into HTML5 compatible formats and provide some user interface controls elements for the video. In this tutorial I will walk you through the process in 5 easy steps. Lets Begin!
You own a video site and have some great videos. But the Stevey boy won’t allow you to get onto iPad with that Flash thing. No problem. See below what we can do (Right click and see no flash there. Test it on your iPads too!):
Step1: Convert your video compression into HTML5 supported codecs
Now, there are two main contenders here: H.264 and Ogg Theora.
You will need to download a converter to help you converter your video with one of these two codecs. I recommended converting to both as Safari won’t support Ogg Theora and Firefox won’t support H.264.
Here are some free utilities that can help you convert your video in these formats: XVid4PSP (+ AviSynth), Miro Video Converter, Ogg Theora Converter. Choose the one that best suits your needs.
Step 2. Download an HTML5 video player
There are already a number of HTML5 video players available. Some of there are free and open source offering different features and capabilities like static image, playlists, browser detect and flash fallback options, etc. mostly jQuery based.
Here are some of these players: JW Player, Kaltura, OSM Player, SublimeVideo
I chose JW Player for this demo. But, the steps will be similar for any other player you choose.
Extract the zip file and extract it into appropriate location on your host server.
Step 3. Embed the player scripts in your site
The player will have some javascript files to be included in your headers. JW Player also uses jQuery. JQuery can be embedded as follows:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Next embed the JW Player’s script file (depending on your upload location)
<script type="text/javascript" src="/jwplayer/jquery.jwplayer.js"></script>
Replace your flash video embed code with the video tag and provide the sources. You need to provide the width and height of the player, a static image to be displayed before the video is loaded and played as poster and finally the locations of the video in mp4 (H.264) and ogv (ogg) formats.
<video id="myplayer" width="480" height="270" poster="/upload/myvideo.jpg"> <source src="/videos/myvideo.mp4" type="video/mp4" /> <source src="/videos/myvideo.ogv" type="video/ogg" /> </video>
Finally, load the JW Player with a jQuery function call with the default skin.
<script type="text/javascript">
$('#myplayer').jwplayer({
skin:'/jwplayer/five/five.xml'
});
</script>
Step 4. Add Flash fallback options for unsupported browsers
In case of JW player this is a very minor step. JW player includes a flash player as a file player.swf. Just a line needs to be added to the previous jQuery function call (Remember the comma in between the skin and flashplayer):
<script type="text/javascript">
$('#myplayer').jwplayer({
skin:'/jwplayer/five/five.xml',
flashplayer:'/jwplayer/player.swf'
});
</script>
Step 5. Add some branding and do customization
There will be different types of customizations available for different players like logos, skins, playlists. For JW player changing the skin parameter above can change the look of the player. Themes can be create using jQuery UI theming tools like Themeroller. It’s just an XML file.
I will just change the logo on the player with the following line (the id corresponds to the id of video tag):
<style type="text/css">
#myplayer_logo{
background-image:url("http://www.html5trends.com/logo.png") !important,
width:235px !important
}</style>
And we are done. So Simple! This is the complete code for this demo:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/demos/jwplayer/jquery.jwplayer.js"></script>
<video id="myplayer" width="480" height="270" poster="http://www.longtailvideo.com/jw/upload/bunny.jpg">
<source src="http://www.longtailvideo.com/jw/upload/bunny.mp4" type="video/mp4" />
<source src="http://www.longtailvideo.com/jw/upload/bunny.ogv" type="video/ogg" />
</video>
<style type="text/css">
#myplayer_logo{background-image:url("http://www.html5trends.com/logo.png") !important;
width:235px !important}
</style>
<script type="text/javascript">
$('#myplayer').jwplayer({
flashplayer:'/wp-content/uploads/demos/jwplayer/player.swf',
skin:'/wp-content/uploads/demos/jwplayer/five/five.xml'
});
</script>
Related posts:
