Playing HTML5 Video with fall back for IE8/IE7 and earlier versions of other browsers using Silverlight
- by Harish Ranganathan
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>
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.
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
and when clicking on the “Play” icon,
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 !!!
