No Video with Supported Format and Mime Type Found | Firefox OGG WebM

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

show htaccess file

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

s3 meta data settings

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)

cyberduck mime type settings

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)

transmit mime settings

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!