Unable to host MP4 files on Azure web site

Question

I am hosting a static website on a reserved web site in Azure (It is PaaS, no access to OS/IIS). I am trying to add some .mp4 videos but when I click on the links I get

The resource you are looking for has been removed, had its name changed, 
or is temporarily unavailable.

Please see example here. If I right click on the link and try to save file I get - Failed - No file.

I am using a paid instance so don't think it is resource issue. The video files are less than 2MB. They have never worked. The site is very static.

Does anyone know how I can resolve this? Should I be hosting MP4 files in some other way?

Thanks,

Tchad

Are you sure the file itself is being uploaded to Azure? In Visual Studio, when it builds the package to upload, depending on the settings on that file type it may not actually be uploaded because it's not put into the package. – Juieta

Answer 1

The linked SO answer worked for me conceptually, but it didn't indicate the appropriate fileExtension. My config had to instead indicate the following. (Note, for any who have this question, by default my azure website didn't have a web.config initially, so I had to add the following to a text file, save as web.config, and FTP to my webroot.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
               <remove fileExtension=".mp4" />
               <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
               <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
     </staticContent>
    </system.webServer>
</configuration>

Messily

This solution worked fine for me, but not when I run at localhost. Do I have to manager two differents webconfig? – Teetotal

@MarceloSader add <remove fileExtension=".mp4" /> before mimeMap. – Rectangular

Thank you, that worked for me. Question, what does the <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> do? – Alinealinna

It worked but I had to add it in the folder of the video. – Scum

Answer 2

There is only a single way to do this currently, and I confirmed this with the Azure team.

Add a web.config file to the root of the application wwwroot\web.config with the following contents

<?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <mimeMap fileExtension=".mp4" mimeType="application/mp4" />
      </staticContent>
    </system.webServer>
  </configuration>

Subterfuge

Like A. Morel said above, this worked for me, but I had to put it in the folder with the video itself. There was no Web.config in this project because it was a React App created with the CLI – Sundew

Unfortunately, even React Stacks, require the web.config to properly configure the server for this due to the way the containers are architected. Hopefully, soon, if we choose a node stack it will be just that, Linux/Nginx/Node and NO Windows/.NET stuff at all. – Subterfuge

Answer 3

Have you confirmed your MIME type for .MP4 is correctly configured, as asked:

Windows Azure - Serve unknown (mp4) MIME types in Windows Azure IIS storage

Charlie

.MP4 was not correctly configured. So I created the web.config file in the root of the site and all is good. – Tchad

Can you please accept my original answer to close out the post? Thanks! – Charlie

Please bear in mind that once you have added the mime mapping to your web.config, your local copy might give you some problems. this was the case for me. Adding <remove fileExtension=".mp4" /> just before you add the mapping will solve that. – Renell

Answer 4

I got this exact same problem. The video played on the localhost but not when deployed to Azure.

ewitkows' answer is correct. The web server isn't returning the proper MIME type, so you need to add them to your web.config's <system.webServer> element.

However, I'd just like to add one more detail. When you add the code that ewitkows' answer mentions, your website might stop displaying video on localhost even though it displays correctly on Azure. If you right-click the <video> HTML element and click the View Video menu command from the context-menu, it will give you a 500 HTTP Status Code, and will display the IIS custom error page for it like so:

Observe the Config Error, Config File and Config Source sections. They tell you that IIS already has a MIME type mapping for the elements you added in the web.config.

<staticContent>
  <remove fileExtension=".ogv"/>
  <remove fileExtension=".webm"/>
  <remove fileExtension=".mp4"/>

  <mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
  <mimeMap fileExtension=".webm" mimeType="video/webm"/>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
</staticContent>

So, you need to also remove the IIS ones first. Then it will work on both localhost and also on Azure.

Sideshow

Answer 5

If you're using an Azure App Service, see the answer at How to add Mime Types in ASP.NET Core I tried the web.config route and it didn't work but editing Startup.cs did

Lusitania

Answer 6

Azure Web Apps does not support some types of media files. You could use an Azure Media Service to upload it and later refer the media file from your code.

Frulla