Craft Web Design + Development
Brendan McKeown

Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Check out my resume.

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