Setting up Mime Types on your server
By Carlos Araya
Originally published 4/5/2013
Summary
How to set up media or mime types for your your server and why you should always make sure they are set correctly.
After creating your content and setting up the proper content with text tracks and all the bells and whistles only to have your users report that it doesn’t play for them. You wreck your head for a few days and then discover that your server is not set up to properly handle the new video (or audio or any other type of content) media types (also known as mime types.)
The media types help both servers and browsers to identify the kind of resource being asked for by the browser and served by the server. Take for example:
video/mp4
represents an MP4 (sub type) video (type)
while
application/font-woff
indicates a woff font (sub type) application (type).
With the sheer number of formats, specifications and sub types (if you’re really curious you can check the [Media Type Registry]j), it would be unrealistic to expect a server configuration to handle all the formats that we will use in our web sites and applications.
Fortunately for our system administrators, most if not all, the available servers have a way for you to add new mime types to the server arsenal. The exact process will depend on the server you’re using and some of the servers (Apache) have more than one way to add the media type(s).
I have not listed all the possible servers. Only the ones I’ve directly worked with. If you have more servers to add, feel free to do so.
Apache HTTPD server - httpd.conf
An administrator (with root access ideally) should edit the global configuration file (/etc/httpd.d/httpd.conf for example) and add the new types at the end of the media type listing, the lass line that starts with AddType. The format is illustrated below.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Apache HTTPD server - .htaccess
There may be times when you don’t have access to edit the global configuration file or may want to make an exception by changing the global settings. In this instances Apache will allow you to create a special file (.htaccess) in the directory and add configuration directives that will apply only to that directory tree.
The sample below is a part of the [Boilerplate]
Sample Apache .htaccess mime type section, taken from the HTML5 Boilerplate
# Audio
AddType audio/mp4 m4a f4a f4b
AddType audio/ogg oga ogg
# JavaScript
# Normalize to standard type (it's sniffed in IE anyways):
# http://tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript js jsonp
AddType application/json json
# Video
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot
# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf
# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
NGINX
To change this, you need to update the mime.types file in the conf directory. Depending on how you set up NGINX it could be located under /etc/nginx or /opt/nginx.
After opening the file, you should see something like this:
types {
text/html html htm shtml;
text/css css;
text/xml xml;
...
}
IIS
<pre><configuration>
<system.webServer>
<staticContent>
<!-- Video -->
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Google App Engine
- url: /(.*\.ogv)
static_files: videos_folder/
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)