ThreadAbortException

February 2011 Entries

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

HTML5 and Visual Studio 2010

All of us work with Visual Studio (or the free Visual Web Developer Express Edition) for developing web applications targeting ASP.NET / ASP.NET MVC or Silverlight etc.,  Over the years, Visual Studio has grown to a great extent.  From being a simple limited functionality tool in VS.NET 2002 to the multi-faceted, MEF driven Visual Studio 2010, it has come a long way.  And as much as Visual Studio supports rapid web development by generating HTML mark up, it also added intellisense for some of the HTML specifications that one has otherwise monotonously type every time.  Ex.-

In Visual Studio 2010, one can just type the angular bracket “<” and then the first keyword “h” or “x” for html or xhtml respectively and then press tab twice

image

and it would render the entire markup required for XHTML or HTML 1.0/1.1 strict/transitional and the fully qualified W3C URL.

image

The same holds good for specifying HTML type declaration.  Now, the difference between HTML and XHTML has been discussed in detail already, though, if you are interested to know, you can read it from http://www.w3schools.com/xhtml/xhtml_html.asp

But, the industry trend or the buzz around is HTML5.  With browsers like IE9 Beta, Google Chrome, Firefox 4 etc., supporting HTML5 standards big time, everyone wants to start developing HTML5 based websites.

VS developers (like me) often get the question around when would VS start supporting HTML5. 

VS 2010 was released last year and HTML5 is still specifications under development.  Clearly, with the timelines we started developing Visual Studio (way back in 2008), HTML5 specs were almost non-existent.  Even today, the HTML5 body recommends not to fully depend on the entire mark up set as they are still under development specs and might change in the future.

However, with Visual Studio 2010 SP1 beta, there is quite a bit of support for HTML5 based web development.  In fact, one of my colleagues pointed out that SP1 beta’s major enhancement is its ability to support HTML5 tags and even add server mode to them.

Lets look at the existing validation schema available in Visual Studio (Tools – Options – Validation)

image

This is before installing Visual Studio 2010 SP1 Beta.  Clearly, the validation options are restricted to HTML 4.01 and XHTML 1.1 transitional and below.

Also, lets consider using some of the new HTML5 input type elements.  (I found out this, just today from my friend, also an, ASP.NET team member)

<input type=”email”> is one of the new input type elements according to the HTML5 specification.  Now, this works well if you type it as is  in Visual Studio and the page renders without any issue (since the default behaviour is, if there is an “undefined” type specified to input tag, it would fall back on the default mode, which is text.

The moment you add <input type=”email” runat=”server” >, you get an error

image

Naturally you don’t get intellisense support as well for these new tags. 

Once you install Visual Studio 2010 Service Pack 1 Beta from here (it takes a while so you need to be patient for the installation to complete), you will start getting additional Validation templates for HTML5, as below:-

image

Once you set this, you can start using HTML5 elements in your web page without getting errors/warnings.  Look at the screen shot below, for the new “video” tag which is showing up in intellisense (video is a part of the new HTML5 specifications)

image

 

 

note that, you still need to hook up the <!DOCTYPE html /> on the top manually as it doesn’t change automatically  (from the default XHTML 1.0 strict) when you create a new page.

Also, the new input type tags in HTML5 are also supported

image

One, can also use the <asp:TextBox type=”email” which would in turn generate the <input type=”email”> markup when the page is rendered.  In fact, as of SP1 beta, this is the only way to put the new input type tags with the runat=”server” attribute (otherwise you will get the parser error mentioned above.  This issue would be fixed by the final release of SP1 beta)

Going further, there may be more support for having server tags for some of the common HTML5 elements, but this is work in progress currently.

So, other than not having runat=”server” support for the new HTML5  input tags, you can pretty much build and target HTML5 websites with Visual Studio 2010 SP1 Beta, today. 

For those who are running Visual Studio 2008, you also have the “HTML5 intellisense for Visual Studio 2010 and 2008” available for download, from http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/

Note that, if you are running Visual Studio 2010, the recommended approach is to install the SP1 beta which would be the way forward for HTML5 support in Visual Studio.

Of course, you need to test these on a browser supporting HTML5 such as IE9 Beta or Chrome or FireFox 4.  You can download IE9 Beta from here

You can also follow the Visual Web Developer Team Blog for more updates on the stuff they are building.

Cheers !!!