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:

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:

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:

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

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

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

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/

5 comments
  1. 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

  2. It’s my understanding that Safari will only recognize the first source, so you should always place the .m4v source tag first.

    BTW, I’d like to talk to you guys about trading services. Ping me with an email when you have an opportunity.

  3. Hello,
    I’m trying to integrate html5 videos to my RoR website and it doesn’t works with Firefox (3.5.8 and 3.6.10). I found your post from google and tried to add the mime types to my /config/initializers/mime_types.rb using the following code:
    Rack::Mime::MIME_TYPES.merge!({
    “.ogv” => “video/ogg”,
    “.ogg” => “video/ogg”,
    “.webm” => “video/webm”,
    “.mp4″ => “video/mp4″
    })
    But still no result. The server is using rails 2.3.5 and I’m using rails 2.3.2 in my local machine. The video won’t display in local or in the server, just got a black cross instead.

    Any idea what I am missing?

  4. Man, I passed all the morning trying to solve the damn mistake, around why firefox doesn’t play the ogv video, and you have more than one solution!

    Thanks a lot man, you’re the hero of the day!