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
<h1>This is a sample of an HTML5 Video</h1>
<video src="video.mp4" id="myvideo">Your browser doesn’t support this currently</video>
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" />
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.
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
and it would render the entire markup required for XHTML or HTML 1.0/1.1 strict/transitional and the fully qualified W3C URL.
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)
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
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:-
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)
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
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.