Encode Webm Videos for HTML5 Video
In order to use HTML5 video and support all modern browsers, you need to serve (as of the time of writing) 2 different source encodings: mp4 and webm. The mp4 format is commonly used in desktop media, and can be easily be encoded with programs like Handbrake. The webm format is not as commonly found. I tried the free Mira video conversion software, however it doesn't allow you to tweak any settings. On the other end of the spectrum, ffmpeg is a command-line tool that gives you full control over everything (which can be a little overwhelming at first). Here's how I went about encoding my webm video file with ffmpeg.
First, install ffmpeg. The quickest way of doing this on Mac OS X is with Homebrew. Make sure you install the special encoding options included below.
brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aacc
Granted that installs without any issues, now you can encode your webm video. The options below produce adequate video quality with a variable bitrate. Just replace
source.mp4 with your source file and
output.webm with your desired destination file. Check out the documentation if you want to play around with the options.
ffmpeg -i source.mp4 -c:v libvpx -qmin 0 -qmax 50 -crf 5 -b:v 1M -c:a libvorbis output.webm