Home > English > HTML 5 Video tag and IIS

HTML 5 Video tag and IIS

HTML 5 is pretty awesome and it is only going to get better as far as removing dependendies on third-party plugins for simple things like watching movies or playing music.

Visual Studio 2010 is a great development environment. I really don’t believe that there is a better one on the the market for what it does. One thing that it does too well is setup your virtual environments for debugging your web sites either through Cassini or IIS Express. I don’t mind that it does all these neat tricks to make my development experience enjoyable but I do get concerned when I try and deploy my working application to IIS and it stops working completely. I don’t mind running into issues when I deploy an application to IIS but it is always nice to know what the problem is.

The most common reason for this error is the fact that IIS does not have any MIME types setup for the video that you are trying to stream. We can fix this in a couple ways:

  • Go into IIS and manually add in the .mp4 MIME type. If you are going to be hosting a lot of video and don’t ever want to worry about this again on your server, then this is probably the best solution.

  • If you don’t have full control over your IIS box but you still want to have your video working you can make a simple entry in your Web.config file as follows:
    <?xml version="1.0" encoding="utf-8"?>
    <!--
      For more information on how to configure your ASP.NET application, please visit
      http://go.microsoft.com/fwlink/?LinkId=152368
      -->
    <configuration>
      ...
      <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
          <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
        </staticContent>
      </system.webServer>
    </configuration>
    

As you can see both examples are fairly easy to do but it can be somewhat frustrating when it is working perfectly from Visual Studio 2010 but does not work once you publish your solution.

Be careful not to try and implement both of these or you will get the following error:

Hope this helps…

NOTE: I also wanted to point out that since this is still new. I had to use several browsers to make sure that it was working and not just the browser itself. I found that if I couldn’t get it to work in IE 9, it would work on Chrome. So don’t give up if you are finding issues with this. Also, I have been able to play my videos on the HP TouchPad, Apple iPad, Asus EeePad, and my Windows Phone 7. All pretty cool!

Advertisements
  1. No comments yet.
  1. December 7, 2011 at 4:35 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: