I have recently been working on a client site which needed the integration of HTML5 video.  The client deals heavily in social media and therefore required video to work in iPhones and iPads.  HTML5 video seemed like the best option.  Therefore my challenge was to integrate HTML5 video as well as including the more traditional flash video for legacy browsers.  Here is my approach.

The first thing to note was the new HTML5 tags to integrate the HTML video.  There is now simply a <video> tag that can be used to incorporate video into your webpage.  The issue is what video codecs to use in order to display your video.  As usual different browser behave different and support different video and codec types, so the first thing is to get your video into the correct format.

I quickly found that for each video that would be displayed on the website, we would need to encode the video in three different formats.  The first of these is the familiar H.264 video codec.  This is usually wrapped in an MPEG4 file and is recognised by Chrome, Safari, IE9, iPhone (iPad) and Android.  The second is the less well known Theora codec which is wrapped in a .OGV file.  This is compatible with Chrome, Opera and Firefox.  As you will notice it is only Chrome that supports both types and therefore to make sure that all users can see your videos you will need to include both types.

But what about users that are not using an up to date browser?  These users will need to relay of the older (although still widely used) flash (.flv) format.  Therefore you need to encode you final video in the .flv format or you could use a video sharing service such as YouTube.

In order to enable all three of these videos, so that all browsers and configurations are covered, the following code is used:

<video width="480" height="272" controls>
    <!-- used for HTML5 enabled browsers -->
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <!-- fallback for none HTML5 users -->
    <p id='preview'>In order to view this content you need to enable javascript in your browser.</p>
    <script type='text/javascript' src='swfobject.js'></script>
    <script type='text/javascript'>
        var s1 = new SWFObject('player.swf','player','480','272','9');
        s1.addParam('allowfullscreen','true');
         s1.addParam('allowscriptaccess','always');
         s1.addParam('flashvars','file=video.flv');
         s1.write('preview');
    </script>
</video>

You can see that the first part of the code above is the HTML5 video.  We have embedded everything inside the new HTML5 video tag.  What this means is that first of all the browser will use the .mp4 version of the video, however browsers that can’t play that will then display the .ogv version of the video.  Any browser that doesn’t use HTML5 will not understand the video tags used and therefore will simply use the code inside the <script> tags which uses the JW Flash Player.

This works really well but what I wanted to do was to give the user the ability from with a post or page to add the video URLs (for all three codecs) as well as the height of the video.  To do this I have utilised WordPress custom fields in order to store the information for the video URLs.  Therefore the code above has been turned into something like the code below in order to pull the video URLs and the height of the video from the current post or pages custom fields.

<video width="480" height="<?php echo get_post_meta($post->ID, "th_videoheight", true); ?>" controls>
    <!-- used for HTML5 enabled browsers -->
    <?php if ( get_post_meta($post->ID, "th_mp4videourl", true) ) { // checks if an mp4 version of the video has been added ?>
         <source src="<?php echo get_post_meta($post->ID, "th_mp4videourl", true); ?>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <?php } ?>
    <?php if ( get_post_meta($post->ID, "th_ogvvideourl", true) ) { // checks if an ogv version of the video has been added ?>
         <source src="<?php echo get_post_meta($post->ID, "th_ogvvideourl", true); ?>" type='video/ogg; codecs="theora, vorbis"'>
    <?php } ?>
    <!-- fallback for none HTML5 users -->
    <p id='preview'>In order to view this content you need to enable javascript in your browser.</p>
    <script type='text/javascript' src='<?php bloginfo('template_url'); ?>/videoplayer/swfobject.js'></script>
    <script type='text/javascript'>
        var s1 = new SWFObject('<?php bloginfo('template_url'); ?>/videoplayer/player.swf','player','480','<?php echo get_post_meta($post->ID, "th_videoheight", true); ?>','9');
        s1.addParam('allowfullscreen','true');
        s1.addParam('allowscriptaccess','always');
        s1.addParam('flashvars','file=<?php echo get_post_meta($post->ID, "th_flvvideourl", true); ?>');
        s1.write('preview');
    </script>
</video>

In the code above you will notice that all the code starting with th_ is the custom field names that have been used.

The next thing that I did was to looks for a piece of software that I could use to encode my videos in the correct formats.  I came across a piece of software for Mac called Evom which enables you to choose to encode for HTML5 and therefore it produces video in the 2 HTML formats (.mp4 and .ogv).  I then used the Adobe Flash Video Encoder bundled with Adobe CS3 suite to make the flash version.

This code therefore enables HTML5 video with a WordPress install as well as using a more traditional flash player to cope with legacy browsers.  I hope you find this post useful and as usual please comment with any questions/feedback.