Why Isn’t OGG Video Playing in Firefox from Amazon S3? It might be all in your headers.

Feature image

Let’s assume you’re trying to build a site with HTML5 video playback and you use Amazon S3. Good so far, right? Well, depending on how uploaded your video files to your Amazon S3 server, you might end up with video that won’t play back in Firefox. Actually, it’s not that it won’t load, it won’t even load and attempt to play.

It has to do with the headers that are set of the file during their upload. I normally use Transmit, the wonderful FTP program for the Mac. If you do the same though, you’re likely to hit the same roadblock I hit. The .ogv video file you’re storing on Amazon S3 or Amazon Cloudfront just doesn’t load into Firefox.

Transmit (as of version 4.1.2, at least) sets the headers of .ogv files to “binary/octet-stream” by default. Unfortunately, that will probably lead to the files not loading when you need them in Firefox. Your beautiful HTML 5 video solution will fail silently.

Transmit has a the ability to set custom headers for files being sent to Amazon S3 though, and if you configure your preferences correctly, your OGG video will work. The image at the beginning of this article shows what your finished preference panel should look like.

First click the left most + button and type “ogv” then, with that “ogv” highlighted, click the 2nd + button in the bottom center. Under name put “Content-Type” and under value put “video/ogg”. Simple? Maybe, but it’s not very intuitive, but it’s what works.

I only figured this out because I also happen to be using S3Fox Organizer, a free Firefox add-on that I also recommend. I had some videos playing in Firefox and some that weren’t. The ones from S3Fox Organizer were playing and the Transmit uploaded files weren’t. It turns out S3Fox Organizer set the content headers for my OGG to “video/ogg” by default. Maybe Transmit will do that by default someday too. (I’ve spoken to a member of the Panic team responsible for Transmit via email and they’ve added it to the feature requests list.) I’m not sure what the reasoning was for setting it to “binary/octet-stream” was, but there must have been a reason. The mysteries of life…

If you’re on Windows, be sure to check out CloubBerry. It also lets you set content headers of files. It’s the only tool of these 3 that I can seem to change the header MIME types of files I’ve already uploaded.

Comments on this post.

Hi
What is the best video camera to use to make professional movies?
I am 14 and I want to be a Movie Director when I get older. I have been looking at cameras for a while now and have bought quite a few, but none have worked well enough. My friends and I make videos for contests and I’ve been trying to introduce myself to the directing world.

By facebook layouts on Oct 18 2010

Awesome!

Thanks for this - it’s EXACTLY the problem I was having… the problem? TRANSMIT (Love it still though)...

You’ve just saved me so much time.

Cheers

Dave

By Dave on Oct 22 2010

Awesome tip, total life saver. I’m running into a similar issue with IE 9 not playing .m4v files uploaded with Transmit 4. If I serve an absolute path to an video hosted at ie.microsoft.com it plays fine. If I download that same file, and upload it to my server, it doesn’t work.
http://ie.microsoft.com/testdrive/Graphics/VideoCity/windows.mp4 (works)
http://72.10.32.177/assets/video/windows.mp4 (doesn’t work)

I was wondering if it could be a similar issue so following the same steps I set .mov and .m4v to Content-Type video/m4v, but it I didn’t work.

Anyone else have this issue. It will play fine in Safari and Chrome, but not IE 9.

Maybe there is something I need to do with .htaccess, but in the end I’m planning on hosting the videos on Amazon S3. I’ve only temporarily been testing them on the same domain to remove the possibility of it being a cross domain issue.

By John-Paul on Mar 15 2011

tip saved me hours of debugging!

By christian on Nov 16 2011

after me putting in about a thousand hours of debugging, this post was my saviour (even if it is over a year old) !!! Thanks so much!!!

By Ben on Apr 26 2012

Thanks! Very weird that the headers can’t be set through amazons aws console (a limited list is available though). Downloading Clouberry was indeed the tool I needed.

By Ivo on Jun 14 2012

Wow, so glad i ran into this post. Just spent 2 hours going in circles, and it was Transmit.  Thanks

By Alex on May 02 2013

Guess what?  You’re fucking awesome.  This tip saved me so much time.  Thank you.

By Andrew on Jan 15 2014

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Hazy night in Union Square