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 !!!
