I was working on an HTML 5 application that loads & plays MP4 files and noticed that some older version of Firefox simply refuse to load media files, although their codec is supposed to be supported.

The application I was working on was working perfectly with most browsers - yes, even with IE 11 - but after some time, some bug reports were filled about problems on old Firefox versions.

Since we target business primarily, we had to make sure the app worked with Firefox versions as old as version 38 ESR (while I’m writing this the latest public version is Firefox 50 (!)).

Firefox ESR versions are special versions of Firefox that still get minor updates & security fixes a long time after they are released.

So I downloaded Firefox 38 ESR and I was surprised to see that indeed the application was broken on this version.

After some research, I tracked the problem down to the video tag that simply refuses to play my videos, with the following error into the console:

HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource http://warpdesign.fr/video failed.

Here is the simply code that was used to load a video:

var video = document.createElement('video');
video.preload = "metadata";
video.src = "http://warpdesign.fr/video";

Yes: for some historical reasons, the video had its extension removed from the filename. I know this is a bad thing, but this cannot be changed right now.

So it seems older versions of Firefox simply refuses to load a video if the correct Content-Type is not set.

Since the filename doesn’t have an extension, I cannot simply add this to Apache (would have been too easy):

AddType video/mp4 .mp4

After some research, I found a workaround for this: it is possible to set specific headers with Apache using a regular expression.

All that is needed is to have a rewriteRule that sets some env variable and later add the specific header if the variable has been defined:

RewriteCond %{REQUEST_URI} \/videos\/
RewriteRule (.*) $1 [E=is_video:true]
    
Header set Content-Type video/mp4 env=is_video

Here any URI that contain the /videos/ string will trigger the definition of the video Content-Type header.

With this little change, Firefox 38 happily plays videos, even though they don’t have the correct extension.