Making HTML5 Video work with IIS Express

One of the cool things about HTML5 is the ability to play audio/video files out of the box without the dependency on plugins.  Earlier I had written about HTML5 Video and the fallback using Silverlight for non-supported scenarios

Visual Studio 2010 SP1 has decent support for HTML5, in terms of intellisense, validation etc.,  But, one issue that is constantly faced when using the HTML5 Video tag in an ASP.NET Application (Web/MVC) built using Visual Studio is that, the videos doesn’t play when running the application from Visual Studio on IE9.

Taking a step back, Visual Studio uses ASP.NET Development Server as the default setting when debugging and running applications on the local machine.  The ASP.NET Development Server (also called as Cassini) has been there ever since Visual Studio 2005 days.

So, I created a simple MVC Application with “File – New - Project – ASP.NET MVC 3 Web Application” and left the defaults to create an Application.  I added a videos folder and added a H.264 encoded mp4 video (one of the supported HTML5 Video formats) inside the folder.

Then, I added the following line of code in the “Index.cshtml” file.

<video src="@Url.Content("~/Videos/video.mp4")" id="myVideo" controls ></video>

image

All I got was the above.  Basically a broken link.  I verified that the path is right and the video is indeed playable on Windows Media Player etc.,

The issue was that, since by default Visual Studio uses the ASP.NET Development Server and the ASP.NET Development Server doesn’t have the flexibility to configure MIME types,  It doesn’t understand the video format and hence could not play.  When I ran the application on IE9 and checked the Network Tab of the Developer Toolbar, all I got was what you see below

image

I switched the Project to use IIS Express using “ProjectName” – Right Click – Properties – Web Tab

image

Still had the same result.  Since IIS Express also doesn’t have the MIME Type to play video, configured by default, it couldn’t recognize the video and couldn’t play it.

The simple option is to configure it to use the “Actual IIS” (in the above screen, remove the check from “Use IISExpress”) which can play the video.

But, thankfully this blog post has steps on how to configure MIME types for IIS Express.  Only thing is, I had to change it for configuring the MIME type for playing MP4 video.

So, the steps are

1. Click on Start button

2. Type CMD

3. Right click on the CMD that is listed and choose “Run as Administrator”

4. Do a cd to navigate to the IIS Express directory CD “Program Files (x86)”\”IIS Express”

5. And then run the following command

appcmd set config /section:staticContent /+[fileExtension='.mp4',mimeType='vieo/mp4']

That’s it.  When I re-ran the application, it could play the video.

image

Please note, I was unable to configure or figure out how to do it for the ASP.NET Development Server.  So, if we need to play HTML5 Video from Visual Studio we either need to use IIS Express or use the full fledged IIS.  And from the performance and configuration perspective IIS Express offers a lot more than ASP.NET Development Server and hence it makes more sense to use IIS Express for local development.

Cheers !!!

Print | posted on Thursday, November 3, 2011 5:26 PM

Comments on this post

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
Couldn't this be done by adding the proper we.config settings ?

<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
</staticContent>
</system.webServer>
</configuration>
Left by Nuno Costa on Nov 03, 2011 7:37 PM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
The system.webserver configuration settings are not visible to ASP.NET Development Server. It doesn't look into these settings.
Left by Harish Ranganathan on Nov 03, 2011 11:42 PM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
Hi Sir,
I followed all the steps mentioned in this blog. And am getting proper content-Type. Am always seeing broken link (as shown above) but am able to Right Click and say "Play" and "Pause" but nothing is playing .Kindly assist me . Am badly in need of your help
Left by Basavaraj on Nov 19, 2011 5:20 PM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
Thanks for this. But there's a typo in your command, please update, if you copy and paste from your page it will not work

'vieo/mp4' should be 'video/mp4'

Thanks,

Andy
Left by Andy on Nov 22, 2011 10:00 PM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
Nice Post.
Read More: http://www.codinghub.net/2011/11/what-is-html-5.html
Left by James on Dec 01, 2011 11:04 AM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
This is clever. Our group is actually going to benefit from this. You're a big help. More power!
Left by New Rugby Shirts on Mar 10, 2012 6:46 AM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
typo in config

appcmd set config /section:staticContent /+[fileExtension='.mp4',mimeType='vieo/mp4']

vieo should be video.
Left by Aseem Gautam on Mar 28, 2013 2:11 AM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
I have read your blog post which is on "Making HTML5 Video work with IIS Express", it give me so much knowledge. I want to make video on essay reviews and for that i was learning about IIS express and every little information about this software is important for me.
Left by Eddie on Jan 26, 2018 3:40 AM

# re: Making HTML5 Video work with IIS Express

Requesting Gravatar...
It’s a tricky question and you have done a great job providing information regarding Making HTML5 Video work with IIS Express. The detailed explanation to each and every topic give a better idea about everything to be considered. I would really be happy to contribute any information if I can. Trinity Builders Reviews
Left by Taylor Shaw on May 04, 2018 3:38 PM

Your comment:

 (will show your gravatar)