Firefox fails to display HTML 5 OGG and WebM video formats on the page and displays the error – “No Video with Supported Format and Mime Type Found“
The issue is that the web server doesn’t quite know what to think of these formats and serves them out in the wrong type of format which the browser doesn’t understand. What you need to do is add the correct file types of OGG and WebM for video to the Web Server for those file extensions. MP4 will be Ok as that fomat is more widely adopted.
Apache WebServer
To fix this issue on Apache you need to add the following content to the ‘.htaccess‘ file which is found in your document root (public_html or htdocs). As it starts with a ‘.’ it is invisible to some browsing apps make sure you have a ‘show invisible files’ settings enabled. Below is the setting for the free FTP client Cyberduck
Just paste this at the very head of the .htaccess file and save:
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
You can also add these mime types directly in the Apache configuration file ‘mime.types’, this way it will affect all sites that share the same server. Open the file below –
/etc/httpd/conf/mime.types
Add in –
video/mp4 mp4 m4v
video/ogg ogv
video/webm webm
audio/mp4 m4a
audio/ogg ogg oga
Restart Apache –
sudo apachectl restart
That should solve any Firefox browser issues. However what if your video/audio files are being served from a cloud style storage solution like Amazon S3, this will also needs mime types added.
Amazon S3 Mime Types Serving
There are a few ways to do this – directly in S3 or via an FTP client.
Directly in S3
Select the file and in the Properties set the Key and the Value to ‘Content-Type’ and then the required ‘video/extension‘. This doesn’t always take immediate affect on existing files and a replacement upload with a different filename and the correct key/value applied will force it to work in the browser.
Directly in Cyberduck (Mac & PC)
Rather than go through the S3 web interface you can create a more user friendly connection to the storage buckets via Cyberduck.
Navigate to the file and ‘Get Info’ (command+i), then set the name and value. Once done one time, files of the same type will automatically get the correct mime types.
Directly in Transmit (Mac)
In Transmit (preferences > Cloud) you can permanently add in the name/value pairs so all subsequent uploads will contain the mime type.
Name / Value Pairs
The Name is Content-Type
The Value is one of the following:
- video/mp4
- video/ogg
- video/webm
- audio/mp4
- audio/ogg
That’s the lot, all you needed to know about mime content headers but were too afraid too ask. Below is some additional information on setting up the key video players for general use and for responsive design techniques – enjoy!