Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

One of the popular HTML5 tags is the video tag.  The ability to play videos without depending on a plugin is something that excites web developers to a great extent and no wonder you end up seeing video demos in all HTML5 conferences.

Now, coming to HTML5 Video, the tag itself is simply <video id=”ID” src=”FILENAME.mp4/ogv/webm” > in the simplest form.  This also means that the video needs to be H.256 encoded MP4 format or some of the other formats as mentioned above.  For a detailed specification on this, check this Wikipedia article

HTML5 video is supported by all the modern browsers such as IE9 (currently in RC stage), Mozilla Firefox 4 and Chrome latest versions.  Here below is a simple example of a HTML5 video tag and the screen shot of how it looks like in IE9 RC

<!DOCTYPE html>
<head></head>
<body>
<h1>This is a sample of an HTML5 Video</h1>
<video src="video.mp4" id="myvideo">Your browser doesn’t support this currently</video>
</body>
</html>

image

You can add attributes to the video tag such as “autoplay” which will automatically start playing the video.  Also, you can specify “poster” to display an initial picture before the video starts playing etc., but I am not going into those for now.

This would play well in the modern browsers as mentioned above.  However, if the end users are viewing this page from an earlier version of browsers such as IE8/IE7 or IE6, this video wouldn’t play.  Whatever text that is specified between the video tags, would just show up.

image

Note: for demo purposes, I went to the IE9 developer toolbar and chose IE8 as Browser Mode to exhibit this legacy behaviour. 

However, in the interest of serving the larger community of users who visit the site, we would like to have a fall back mechanism for playing videos on older version of browsers.

Now, Silverlight is supported in IE6/7 & 8 and other browsers too.  If we can have the same video encoded for Silverlight, we can put the fall-back code, as follows:-

<video src="videos/video.mp4" id="myvideo">
    <object height="252" type="application/x-silverlight-2" width="448">
        <param name="source" value="resources/player.xap">
        <param name="initParams" value="deferredLoad=true, duration=0, m=
http://localhost/DemoSite/videos/video.mp4, autostart=false, autohide=true, showembed=true, postid=0" />
        <param name="background" value="#00FFFFFF" />
    </object>

</video>

 

Note, this sample uses a Silverlight XAP file with the same video and uses the object tag to embed it instead of the HTML5 video tag.

So, when I now run this sample and switch to IE8 (using the IE9 Developer toolbar’s Browser Mode), I get

image

and when clicking on the “Play” icon,

image

Note, there are multiple ways to play videos in Silverlight and this is one of the ways.  For a complete list of Silverlight samples, visit http://www.silverlight.net/learn/ 

Also, we can use Flash to play video in the fall-back mechanism as well.

Thus, we can create a fall-back mechanism for playing HTML5 videos for the older browsers and hence ensure that the end users get to experience the same.

Cheers !!!

Print | posted on Tuesday, February 22, 2011 6:26 PM

Comments on this post

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
ranganh,
couldn't understand difference between <embed> tag and <video> tag. <embed> tag also used to play multimedia files, we have option to specify if there is no browser support via <noembed> tag. we have "autoplay" attribute also I think.
Left by Sruthi on Feb 22, 2011 9:21 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
video tag is the new HTML5 tag. embed is outdated and will be deprecated soon.
Left by Harish Ranganathan on Feb 22, 2011 9:25 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
ok Harish.But when i had a look at some articles, I came to know that the embed tag was deprecated in HTML4 , but it has been introduced back in HTML5 with some new features.
Left by Sruthi K on Feb 23, 2011 4:48 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
couldn't understand difference between <embed> tag and <video> tag. <embed> tag also used to play multimedia files, we have option to specify if there is no browser support via <noembed> tag. we have "autoplay" attribute also I think.

thaks
Left by kurye on Mar 03, 2011 4:17 PM

# AS

Requesting Gravatar...
HTML5 is the latest version of HTML. To tell the truth it attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. I really like your detailed instructions with pictures and videos. Thanks for sharing.
Left by Custom dissertation on Mar 18, 2011 6:25 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
Just wanted to say that I read your blog quite frequently and I’m always amazed at some of the stuff people post here


I know what to do, thank you! Actually this Blog post helped me a lot. I hope you continue writing about this kind of entry.
Left by Vodafone online recharge on May 03, 2011 9:48 AM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
looks good! thanks a lot for sharing.
Left by Lisbon hotels on May 18, 2011 10:30 AM

# Error while playing video

Requesting Gravatar...
I am unable to play video element in IE9 . I am getting an error "SCRIPT16385: Not implemented

modernizr-1.7.min.js, line 10 character 5972
SCRIPT65535: Unexpected call to method or property access.
HTML5Deom, line 47 character 5"

Kindly assist me
Left by Basvaraj on Nov 09, 2011 7:38 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
Thank you for the script and explanations :D You are genius!
Left by Imobiliare Cluj on Feb 21, 2012 6:17 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
I really like your detailed instructions and the video. HTML5 rules!
Left by Eric on Feb 24, 2012 3:43 AM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
<video src="test.mp4" id="myvideo" controls>
<!--fall back -->
<object width="300" height="300"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="MinoPlayer_Ver1_2.xap"/>
<param name="initParams" value="deferredLoad=true, m=test.mp4, autostart=true, autohide=false, showembed=true, postid=0" />
<param name="background" value="blue" />
</object>

I still cant get the video running on IE8. the xap player and my video file are in my root directory. Thanks alot
Left by Anthony on Mar 02, 2012 7:28 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
HTML5 is awesome - it has so many features that you can do so much more then usually - i recently made tabs using html - it was awesome especially since there was no way on making them in html :D
Thank you for the video - learned a lot :D
Left by Imobiliare Cluj on Mar 20, 2012 12:36 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
Many observers like to show their skills in all areas, and few of them are right. They tend to see bestsamplepapers.com free writing as a profound source.
Left by MethewS on Jun 22, 2012 1:10 PM

# re: Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight

Requesting Gravatar...
http://suvarikurye.com - Thank you for the script and explanations :D You are genius!
Left by Kurye on Oct 21, 2013 7:43 PM

# Motorlu Kurye

Requesting Gravatar...
http://motorlukurye.com - Thank you admin, you are the best!
Left by http://motorlukurye.com on Dec 27, 2013 12:59 PM

# Motorlu Kurye

Requesting Gravatar...
http://motorlukurye.com - Thank you admin, you are the best!
Left by http://motorlukurye.com on Dec 27, 2013 12:59 PM

# Motorlu Kurye

Requesting Gravatar...
http://motorlukurye.com - Thank you admin, you are the best!
Left by http://motorlukurye.com on Dec 27, 2013 12:59 PM

# Motorlu Kurye

Requesting Gravatar...
http://motorlukurye.com - Thank you admin, you are the best!
Left by http://motorlukurye.com on Dec 27, 2013 12:59 PM

# Motorlu Kurye

Requesting Gravatar...
http://motorlukurye.com - Thank you admin, you are the best!
Left by http://motorlukurye.com on Dec 27, 2013 12:59 PM

Your comment:

 (will show your gravatar)