Reputation: 863
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?
Upvotes: 6
Views: 15176
Reputation: 11
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);
}
}
Upvotes: 0
Reputation: 4088
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
Upvotes: 6