Note: This post is more of a reminder to myself and also help out whomever lands here. It took me a couple of good Google searches to figure this one out.
Uploading directly to Amazon’s S3 through the web client has definitely changed overtime. It used to be that in order to change any content-types for files, you had to either create a script yourself or use an FTP client to physically set the content-types. I decided to use the web interface to be quick and rely on Amazon S3 automatic meta data preference setters. Unbeknownst to me, I didn’t realize it doesn’t set an OGG content-type correctly.
The setup
With HTML5 video, there are three main players (outside of Flash Video) in the field. MP4 — which all webkit based browsers read and understand, OGG — for Mozilla based browsers such as FireFox, and WebM — relatively newer, but based off the OGG codec. With everyone still duking it out to see which one is better or who wins, you must support all of these in your HTML5 video tag.
Since this Facebook application was going to get pretty good traffic based on the subject matter (Absolut Vodka and Cee Lo Green), we chose to serve the video files off S3.
The issue at hand
I develop in Chrome and test in all browsers, but this one time, I forgot to utilize FireFox to make sure it worked. It just so happened that the client uses FireFox and let us know that the videos they were trying to view were not playing.
Now we were using a JavaScript plugin called VideoJS which automatically falls back to using a Flash player if the browser doesn’t support HTML5 video, this should not have been happening. Since it was FireFox, it was looking to read an OGV codec file, which it was getting, but didn’t understand it because of the content-type it was being served.
The solution
By default, when uploading any files to Amazon S3, Amazon automatically sets the content-type headers. Any video file that is uploaded, it tags it as content-type:
1 | application/octet-stream |
This is perfectly fine for serving MP4 files, but OGV (OGG) files don’t follow those rules. To fix, you have to change the value to something not in the given list:
1 | video/ogg |
Doing so allows S3 to serve the OGV file to the browser and the browser understand what content it is being given.
Like I mentioned above, this only happened when using the web interface for S3. Doing so through an FTP client, you can set it at the time of upload.
Hope this solves any headaches in the near future.