Internet Explorer 9 arrived this week with HTML 5 features galore.

Visual Studio 2010 SP1 recently shipped with HTML5 support as well.

So, lts get started adding HTML5 features to our ASP.NET Web Sites.

In this post – we’ll play video in the browser using HTML5 Video Tags.

Before you continue – I suggest you read this post on writing HTML5 markup that degrades gracefully.

The good news is that the HTML5 Video tag has backward compatibility support built in.

The bad news is that we need to do a little more than just write code.

Different browsers support different video formats and HTML5 lets you specify multiple source video files so the browser can use the one it supports.

Example:


<video width='640' height='360' controls>

   <!-- Safari / iOS video    -->
   <source src='SomeVideo.MP4' type='video/mp4' />

   <!-- Firefox / Opera / Chrome10 -->
   <source src='SomeVideo.OGG' type='video/ogg' />

   <!-- fallback - no support for the HTML Video Tag -->
   <img src='NO-VIDEO.JPG' width='640' height='360'
        alt='No HTML5 VIdeo Support'
        title='No video playback capabilities' />
</video>

By default, IIS won’t be configured for certain MIME types that we will want to use with HTML5 video, like .OGG

The built it Visual Studio Web Server doesn’t let you configure your own MIME types so you’ll need to use IIS.

You could use the Web.Config file to specify new mime types [ READ HERE ], but lets make it permanent.

Fire up the IIS Manager and locate the MIME Types Button

Open the MIME Types dialog and add an .ogg MIME type.

Now we’re ready to code.

Create a new ASP.NET WebForms Web Site using the default Web Site template and add this markup to the Default.aspx page.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
       <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <video src='windowsmedia.ogg' controls='controls'>
    </video>
</asp:Content>

Don’t forget to change the name of your .ogg file to one you have coppied to your project directory.

Now, view the default.aspx page in Google Chrome.

BUT, try view this page on your iPad and you’ll get NO JOY.

iPads want .mp4 files so you’ll need to use the cascading source feature shown above.

Even when yo do that, older browser just don’t support the HTML5 video tag no matter what media file you feed them.

To support “legacy” browsers we’ll need to implement a fall back strategy, this can be Windows Media Player, a Silverlight Video Control, a Flash Player, just like the “old days”.

Here is an implementation in our Default.aspx page that uses the Windows Media Player.



<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <video src='windowsmedia.ogg' controls='controls'>
      <object id='mediaPlayer' width='320' height='285'
          classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
          codebase='http://activex.microsoft.com/activex/controls
                         /mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
          standby='Loading Microsoft Windows Media Player components...'
          type='application/x-oleobject'>
          <param name='fileName' value='windowsmedia.wmv'>
          <param name='animationatStart' value='true'>
          <param name='transparentatStart' value='true'>
          <param name='autoStart' value='true'>
          <param name='showControls' value='true'>
          <param name='loop' value='true'>
      </object>
      </video>
</asp:Content>

So now when we call up Default.aspx in Internet Explorer v. 8, 7, etc. we get the graceful fall back.

You can download a code sample [ HERE ] but remember you’ll need to make the IIS MIME type additions yourself.