HTML5 video rails

Make OGG Video work with Rails


by Sebastian Deutsch on November 9th, 2009

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 pritty 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:

PLAIN TEXT
CODE:
  1. ffmpeg -i input.avi -f mp4 -vcodec mpeg4 -b 1500 -qmin 3 -qmax 5 -s 320x256 -b 384 output.m4v

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

The <video> tag

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

PLAIN TEXT
HTML:
  1. <video width="560" height="330" controls="controls" autobuffer="autobuffer">
  2.     <source src="/videos/video.ogv" type="video/ogg" />
  3.     <source src="/videos/video.m4v" type="video/mp4" />
  4. </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 webservers (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 serveral places - for the completeness I listed all major webservers:

Rails

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

PLAIN TEXT
RUBY:
  1. Rack::Mime::MIME_TYPES.merge!({
  2.   ".ogg"     => "application/ogg",
  3.   ".ogx"     => "application/ogg",
  4.   ".ogv"     => "video/ogg",
  5.   ".oga"     => "audio/ogg",
  6.   ".mp4"     => "video/mp4",
  7.   ".m4v"     => "video/mp4",
  8.   ".mp3"     => "audio/mpeg",
  9.   ".m4a"     => "audio/mpeg"
  10. })

Apache

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

PLAIN TEXT
CODE:
  1. AddType audio/ogg            .oga
  2. AddType video/ogg             .ogv
  3. AddType application/ogg    .ogg
  4. AddType application/ogg    .ogx
  5. AddType audio/mpeg          .mp3
  6. AddType audio/mpeg          .m4a
  7. AddType video/mp4            .mp4
  8. AddType video/mp4            .m4v

Lighttpd

Same here etc/lighttpd/lighttpd.conf

PLAIN TEXT
CODE:
  1. ".ogg"          =>      "application/ogg",
  2. ".ogx"          =>      "application/ogg",
  3. ".ogv"          =>      "video/ogg",
  4. ".oga"          =>      "audio/ogg",
  5. ".mp4"         =>      "video/mp4",
  6. ".m4v"          =>     "video/mp4",
  7. ".mp3"         =>      "audio/mpeg",
  8. ".m4a"          =>     "audio/mpeg",

NGINX

or here /etc/nginx/mime.types

PLAIN TEXT
CODE:
  1. application/ogg ogg ogx;
  2. video/ogg ogv;
  3. audio/ogg oga;
  4.  
  5. video/mp4 mp4 m4v;
  6. 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/

2 Comments
2 comments
  1. Thomas Glasgow May 14, 2010 at 5:12 pm

    Hi,

    Is it possible to seek into the videos with Nginx or does it work like plain old progressive download?

    Thanks

    • Sebastian Deutsch May 14, 2010 at 5:14 pm

      Hi,

      I don’t know. I would assume that the ogg container is not as forgiving when it comes to seeking as flv is. Yet there is no standardized streaming possible.

      Sebastian

Leave a comment