5

I want to show an .mp4 as a background video on a website I created and deployed to Azure via FTP. Unfortunately, accessing the background video always gives me a 404. The pages are all .html files using AngularJS.

I figure that I need to add a custom mime type for .mp4s. Normally this would be done in the Web.Config, but since it was just something I whipped up in Notepad++ I don't have (and besides this issue, haven't really had need for) a Web.Config.

I was looking at the Configuration section in the Azure Portal for the site and can see where I can add connection strings and appSettings, but I don't see anything where I can do MIME types.

Is allowing .mp4s on Azure possible through the portal, or is my only option to make a Web.Config and FTP that up too?

chriszumberge
  • 844
  • 2
  • 18
  • 33

2 Answers2

6

The only way to do this is via the Web.config file. This link below will help you configure the settings in web.config:

Use SVG in Windows Azure Websites

Community
  • 1
  • 1
cory-fowler
  • 4,020
  • 2
  • 18
  • 29
  • 3
    Sorry, the question is specifically about not using a web.config. I know how to do it using the web.config, I was querying about doing it without one. – chriszumberge Mar 15 '15 at 14:29
  • I'm working with the Azure team to try and confirm this. It really doesn't make sense to me. Why should anyone be forced to use .NET if they want to use a Node/Express and that's it. I'd prefer to not even use IIS, rather use NGINX. But, if IIS is the only option maybe this has something to do with it. Even then, however, why can't this be configured using the Portal? – A. Wentzel Apr 11 '19 at 15:33
0

I tried the web.config solution but it didn't work out for me because I was using AuthInterceptor to set Headers globally.

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept': 'application/json',
        'Authorization': `Bearer ${token_here}`,
      },
    });
    return next.handle(req);
  }
}

So, this was also setting up the headers for SVGs and other media files, like in your case for mp4. So, I used to filter the incoming request based on type of request and the type of resource requested. Below is a piece of code:

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method === 'GET' && req.url.endsWith('.svg')) {
      req = req.clone({
        setHeaders: {
          'Authorization': `Bearer ${btoa("admin:admin")}`,
        },
      });
    }
    else {

      req = req.clone({
        setHeaders: {
          'Content-Type': 'application/json; charset=utf-8',
          'Accept': 'application/json',
          'Authorization': `Bearer ${btoa("admin:admin")}`,
        },
      });
    }
    return next.handle(req);
  }
}