Just before launching a custom HTML5 video player for my last project I ran into two small, maddening bugs. Everything on my dev server worked just fine but when moved to the production server Firefox wouldn’t play the video.

The first issue was expected and easy, just had to add the proper Mime types to the .htaccess file:

AddType video/ogg .ogv .ogg

Done, done, refresh and…

… well, the video was playing fine but the normal, native controls were breaking, with the progress bug jumping right to the end of the timeline. Odd. I don’t really deal with server configurations much so I was at a loss and frustrated. A day’s worth of Google searches led nowhere until this post. “Don’t use gzip/deflate compression.” Okay, that seemed to be worth trying, but how… HOW?! Plenty is written about the benefits of turning it on and how to do it, not so much the opposite. Now to find a way, one that didn’t involve messing with the server configuration, and something that a front-end person like me could understand. Here it is, ready for your .htaccess:

RewriteRule ^(.*)\.ogv - [E=no-gzip:1]

Ogg video files, no gzip compression. Problem solved. Hope it helps someone else out.

If any experts out there take issue with that regular expression please let me know in the comments.

Update: It seems Chrome needs gzip turned off on MP4’s in order to play them as well, if you have them listed first in source order as I have.

RewriteRule ^(.*)\.mp4 - [E=no-gzip:1]