HTML5 Audio & Video - Cross Browser

Benefits of HTML5 Media is that you can leverage your HTML, CSS and JavaScript skills rather than learning Flash or Silverlight. If you can create buttons in HTML and control them with JavaScript, you already know all you need to develop HTML5 media. HTML5 media has built-in support for captions and subtitles using the new track element, and proposals for additional features—such as direct byte access for video manipulation—are already being considered.

HTML5 Video & Audio tags works perfectly in IE 9 and above, Firefox & Chrome since these browsers support for HTML5. These browsers support for MP4, Ogg & WebM files. MP4 support for the remaining one third (Windows XP, Mac OS X and Linux) in Firefox is still in progress.

HTML5 Video & Audio JavaScript Libraries:

To make HTML5 Video work in IE8, you need to include some javascript, flash & css files. This javascript create flash player and add all controls(play/pause, time duration, time rail, volume, full screen etc) explicitly. In HTML5 Video tag, you will get all these in-built. Since IE8 doesn't support video tag, we have to add flash player, all these controls.

There are many javascript libraries are available for cross-browsing. Here I am using mediaelement.js file. You can download it from here, http://mediaelementjs.com/. You need to add, mediaelement.js, mediaelementplayer.css & flashmediaelement.swf files into your solution. You will get all these files in build folder of downloaded file.

Step 1: Add Scripts & Styles:

<code><script src="jquery.js"></scrupt>

<script src="mediaelement-and-player.min.js"></script>

<link rel="stylesheet" href="mediaelementplayer.css"/></code>

Step 2: Add Video tag

<video src="myvideo.mp4" width="320" height="240"></video>

Step 3: Convert all <video> tags to MediaElement.js using jQuery
<script>
// using jQuery
$('video').mediaelementplayer(/* Options */);
</script> 

Now the video works fine in IE 8. Make sure you will copy all the image files from downloaded file, otherwise you cannot see play/pause, volume, time rail & etc buttons.

Step 4: Player options
You can five some of the player options which are not mandatory ofcource.

$('video').mediaelementplayer({
    // if the <video width> is not specified, this is the default
    defaultVideoWidth: 480,
    // if the <video height> is not specified, this is the default
    defaultVideoHeight: 270,
    // if set, overrides <video width>
    videoWidth: -1,
    // if set, overrides <video height>
    videoHeight: -1,
    // width of audio player
    audioWidth: 400,
    // height of audio player
    audioHeight: 30,
    // initial volume when the player starts
    startVolume: 0.8,
    // useful for <audio> player loops
    loop: false,
    // enables Flash and Silverlight to resize to content size
    enableAutosize: true,
    // the order of controls you want on the control bar (and other plugins below)
    features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
    // Hide controls when playing and mouse is not over the video
    alwaysShowControls: false,
    // force iPad's native controls
    iPadUseNativeControls: false,
    // force iPhone's native controls
    iPhoneUseNativeControls: false,
    // force Android's native controls
    AndroidUseNativeControls: false,
    // forces the hour marker (##:00:00)
    alwaysShowHours: false,
    // show framecount in timecode (##:00:00:00)
    showTimecodeFrameCount: false,
    // used when showTimecodeFrameCount is set to true
    framesPerSecond: 25,
    // turns keyboard support on and off for this instance
    enableKeyboard: true,
    // when this player starts, it will pause other players
    pauseOtherPlayers: true,
    // array of keyboard commands
    keyActions: []
});

Enjoy HTML5 Video in IE8. Remember, this works fine in IE7 too.

Hope this is useful

Thank you.