Quickly Converting to HTML5 Video

Blake Walters, Former Viget

Article Category: #Code

Posted on

With the recent announcement that Google will be dropping H.264 support from Chrome in favor of its own WebM codec, I begrudgingly assumed that I’d have to take even more time converting videos into yet another format if I wanted them embedded with a tag.

To make life a bit easier I created a shell script that, with the help of a few commandline tools and a bit of setup, can take a single video file and convert to all the requisite formats in one simple step.

View the html5video script on GitHub

note: This guide is intended specifically for the Mac OS X operating system. Most of this guide should translate to any Linux based system but not Windows.

Before we can get to using the script, we’ll need a few things installed already:

  • HandbrakeCLI - if you’ve ever converted a DVD to a digital format, you’ve probably heard of Handrake. This is just the simpler, stripped down, command-line only version of it’s bigger, GUI powered brother.
  • FFMPEG - the swiss army knife of digital media conversion. Stephen Jungels has a great how-to guide on FFMPEG for OS X, or it’s also available through many package managers such as MacPorts and Homebrew.
  • FFMPEG2Theora - converting videos to Ogg Theora couldn’t possibly be simpler.

Now that we have the tools, the script ties it all together. Grab a copy of it from my gist over on Github and save it locally, remembering the path (I use a scripts folder in my home directory).

We need to make the script executable if it already isn’t. From the commandline:

 chmod +x /path/to/html5video.sh

And now we’re ready to go. Run the script, passing a single variable - the path to a video you’d like to convert:

 /path/to/html5video.sh sample-video.mov

The script will create a “converted” directory in the same directory as the video passed if it needs to or just use an existing “converted” directory. It will then run the video through Handbrake, outputting an H.264 encoded mp4 file at the same height and width as the original file and with an average video bitrate of 900kbps. Once that’s complete it will run that video through the ffmpeg2theora converting, outputting an Ogg file for use in Firefox and then finally the script will run it through FFMPEG to generate the WebM file.

One thing to note is these are just sample settings for most of the HTML5 videos we put online. Average bitrates and video dimensions should be tailored specifically to your needs. Configuring these through options passed to the script will be added in the next release.

To learn more about HTML5 video and conversion check out:

Related Articles