SiteKickr Web Development

IE Video Tag HTML 5

After further research of the HTML 5 spec, it seems that our little jQuery hack is unnecessary, as it's perfectly valid to place a "back-up" <object> tag within a video tag:

<video width="700" height="400" controls="controls" autoplay="autoplay" poster="myposter.jpg">
    <source src="mymovie" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="mymovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <source src="mymovie.webm" type='video/webm; codecs="vp8, vorbis"' />
    <object width="700" height="400" data="mymovie.swf">
    </object>
</video>

The method above allows you to use a Flash encoded movie as a backup, which is supported by IE and the older browsers.

 

Previous attempt (not recommended)

While IE 8 supports many HTML 5 tags, it falls short on it's support for the HTML 5 video tag. If you want to use this tag, while maintaining clean HTML 5 markup, we can employ a jQuery "hack" to replace instances of the video tag with an object tag. A quick example is below. You may need to fine tune this to fit your needs, but this should present the idea. If we find the time and energy, we may develop a jQuery plugin to make this task a little easier.
 

if (typeof HTMLVideoElement == 'undefined') {
        // video element not supported, replace it with object
        var videoCount = 0;
        $('video').each(function() {
            videoCount++;
            var videoId = '#video-' + videoCount;
            $('<object id="video-' + videoCount + '" />').insertBefore($(this));
            $(videoId).attr('width', $(this).attr('width'));
            videoEmbed = $(this).children('embed').first();
$(videoId).append('<embed />');
            $(videoId + ' embed').first().attr('width', videoEmbed.attr('width')).attr('height', videoEmbed.attr('height')).attr('src', videoEmbed.attr('src'));
        });     
}