Make OGG Video work with Rails

We are currently working on some interesting project where we have the chance to distribute some video footage with the new HTML5 <video> tag instead of “ye olde” flash player. Since there is a battle between the browser vendors you have to support ogg theora for Firefox and mp4 for Safari and Chrome. What was planned as an easy peasy task turned out to be hours consuming process of fiddling convert parameters together and adding mime-types to server configs. We have learned our lesson and now we share some wisdom.

Convert a video to ogg

The best way to convert a video to ogg is FireOgg. It is a pretty nice FireFox plugin which provides you graphical user interface to convert the video. Very straightforward.

Convert a video to mp4/m4v

This one was more tricky. There a plenty of tools out there Handbrake, Mencoder or the grandmaster ffmpeg. After some struggling, a huge amount of earl grey tea and a lots of error messages we figured out that little snippet to convert the video:

ffmpeg -i input.avi -f mp4 -vcodec mpeg4 -b 1500 -qmin 3 -qmax 5 -s 320×256 -b 384 output.m4v

Note: You have to carefully look at the input dimensions there is a difference between PAL (320×256) and NTSC (320×240) - in some cases you have to adapt the parameter.

The <video> tag

We simply add the video tag with controls and some auto-buffering (so we can immediately start watching) and spice it with two source tags. One for ogg and one for mp4/m4v:

html<source src="/videos/video.ogv" type="video/ogg" /><source src="/videos/video.m4v" type="video/mp4" /></video>

The Mime-Type hazard

When trying to look at our precious results we refreshed the browser… and nothing happened. Deep in my mind I remembered that the most web servers (probably including mongrel) does not support to provide the correct mime-types for ogg files. And the browsers on the other hand are very picky and follow the strict rule “no mime-type, no entertainment”. So we added the mime-types at several places - for the completeness I listed all major web servers:

Rails

Just add these lines to the initializer in config/initializers and don’t forget to restart the server:

htmlRack::Mime::MIME_TYPES.merge!({

".ogg" => "application/ogg",

".ogx" => "application/ogg",

".ogv" => "video/ogg",

".oga" => "audio/ogg",

".mp4" => "video/mp4",

".m4v" => "video/mp4",

".mp3" => "audio/mpeg",

".m4a" => "audio/mpeg"

})

Apache

Just edit/create a file conf.d/mime-types and enter these lines

bashAddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddType application/ogg .ogx
AddType audio/mpeg .mp3
AddType audio/mpeg .m4a
AddType video/mp4 .mp4
AddType video/mp4 .m4v

Lighttpd

Same here etc/lighttpd/lighttpd.conf


bash".ogg" => "application/ogg",
".ogx" => "application/ogg",
".ogv" => "video/ogg",
".oga" => "audio/ogg",
".mp4" => "video/mp4",
".m4v" => "video/mp4",
".mp3" => "audio/mpeg",
".m4a" => "audio/mpeg",

NGINX

or here /etc/nginx/mime.types

bashapplication/ogg ogg ogx;
video/ogg ogv;
audio/ogg oga;
video/mp4 mp4 m4v;
audio/mpeg mp3 m4a;

I hope you enjoyed that little blog post. If we missed out some information just write us a comment and we gonna update the blogpost.

Further reading:

http://diveintohtml5.org/video.html

http://html5doctor.com/the-video-element/