How to convert MP4 to WebM

Here at The Theme Foundry we sell WordPress templates and host quite a few tutorial videos over in the Help Center. We use the excellent SublimeVideo player to power the videos. Unlike YouTube or Vimeo, SublimeVideo lets us host and serve our own video files and keep them white-label. You add the player via one line of JavaScript and you can write native HTML5 video syntax. SublimeVideo provides a clean and flexible player that automatically picks up the video and also handles playing it via Flash when a browser doesn’t support HTML5.

HTML5 video is great, but to support all the modern browsers (Chrome, Safari, Firefox, Opera, IE9/10), you need to serve two versions of your video files. For Chrome, IE9/10, and Safari, you need MP4 video files, and for Firefox and Opera, you need WebM files.

Most video applications can export videos in the MP4 format, but they usually can’t export in the WebM format. You need a tool to convert those MP4 files to WebM.

Quick and easy options

There are two good applications that can do these conversions quickly for you: the Firefogg Firefox extension and the Miro Video Converter. However, they both have some limitations: Firefogg works well, but it doesn’t have batch converting. Miro does have batch converting, but it doesn’t offer total control over the conversion settings and it can be slow. Both are good options if you just want something quick and easy.

Power option: FFmpeg

Let’s learn how to convert MP4 to WebM using FFmpeg for Mac or Linux. FFmpeg is an open source command line utility that actually serves as the engine for the applications noted above. FFmpeg is fast, powerful, and extremely flexible, but it can be difficult to understand and use.

Install FFmpeg

The easiest way to install FFmpeg on a Mac is to use Homebrew. Once you’ve got Homebrew, install FFmpeg with the following command from the Terminal on your Mac:

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aacc

This will install and build FFmpeg with support for the libraries required to convert videos to the WebM format. If you’re on Linux, find the appropriate FFmpeg package for your distribution and install it with support for the libraries mentioned above.

Converting a single file

Convert a single video file by opening up a Terminal window and navigating to the location of your file. If the file is on your Desktop:

cd ~/Desktop

Next, run the FFmpeg command on the file:

ffmpeg -i input-file.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis output-file.webm

When the command is finished you’ll have a shiny new WebM file. Keep in mind, this is a generic way to convert your MP4 videos to WebM. For the absolute best quality, it’s recommended you tweak the settings to work well for the size and quality of your source file(s). Read the FFmpeg documentation and the WebM encoding guide for more details.

Remember, the basic format for the FFmpeg command is:

ffmpeg [global options] [input file options] -i input-file-name [output options] output-file-name

Batch converting files

The easiest way to batch convert a bunch of MP4 files to WebM is to use FFmpeg with a Bash script. Let’s whip one up.

1. Create a new file on your desktop called convert-mp4-webm.sh
2. Set executable permissions by right clicking on the file, choosing Show info, and setting the Permissions value to 755 (lower right hand corner of the section).
3. Paste the code snippet below in the file itself and replace the “video-folder” part with the name of the folder on your Desktop containing the MP4 video files. Remember, spaces in folder names look different in a Bash script. Try to name your folder with a hyphen or an underscore to avoid any problems.

4. Save the file and exit.

   #!/bin/bash
   VIDEOS=~/Desktop/video-folder/
   find "$VIDEOS" -name '*.mp4' -exec sh -c 'ffmpeg -i "$0" -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis "${0%%.mp4}.webm"' {} \;
   exit;

Let’s break down this script into English:

1. The first line tells the system this is a Bash script.
2. The second line assigns the videos folder to the $VIDEOS variable.
3. The first part of the third line find "$VIDEOS" -name '*.mp4' -exec sh -c says: Find any files in the $VIDEOS folder with an .mp4 extension and run a command on each file one by one.
4. The second part of the third line is the actual command: ffmpeg -i "$0" -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis "${0%%.mp4}.webm". This is the same basic FFmpeg conversion command we used in the single file example above. The $0 and 0%% tells the script to use the existing filename for the input and output variables.

Now we need to actually run the script and start the conversion. Open up a new Terminal and navigate to your Desktop:

cd ~/Desktop

Now run the script:

./convert-mp4-webm.sh

You should see the first file start converting. Go grab some coffee and relax, it might take awhile.

Get converting!

Hopefully this tutorial helps speed up you conversion workflow for creating HTML5 compatible videos. Let us know if you have any other better approaches in the comments.

Enjoy this post? Read more like it in Tutorials.