Go to content Go to navigation Go to search

Webdesign Tech-stuff · 19 March 2012 ·

Batch conversion of HTML5 compatible video

Recently I had to develop a website that is using html5’s new <video> element excessively. I had to convert at least 10 videos from the original mov to webm, theora, and x264. If this was audio, I would simply be using the extremely handy MAX Unfortunately, I did not find a similar programme for video files, whereas I created a short bash script that does the job.

The Miro video converter comes pretty close to what I was looking for, but does not do batch conversion. So I decided to go command line and use a simple bash script, based on ffmpeg.

Inspired by this script by Jake Hilton, the following script scans all .mov files in the directory, and converts them into the three compatible video formats:

#!/bin/sh
for f in *.mov;
do
echo "Processing $f"
ffmpeg -i "$f" -strict experimental -f mp4 -vcodec libx264 -acodec aac -ab 160000 -ac 2 -crf 22 "${f%.mov}.mp4"
ffmpeg -i "$f" -f webm -vcodec libvpx -acodec libvorbis -ab 160000 -crf 22 "${f%.mov}.webm"
ffmpeg2theora "$f" --videoquality 8 --audioquality 6 --frontend -o "${f%.mov}.ogv"
done

Notes

  • Mark Pilgrim at diveintohtml5 recommends the use of HandBrakeCLI, which as far as I’m concerned uses ffmpeg itself. So this may just be more comfortable due to better presets.
  • …speaking of which, I am not sure whether these presets are ideal for HTML5 video, I simply used the same as the Miro converter. Suggestions for better settings are welcome.

Installing ffmpeg on OSX 10.6 was another nuisance, since Macports tries to install too many dependencies and eventually fails because I don’t have the right version of Xcode installed. Thus, I simply sneaked the ffmpeg copy from the Miro Converter. For this, go to the Miro app, right-click on Show Package Contents, and you will find both, ffmpeg and ffmpeg2theora in the Resources folder. Copy both to /local/bin/ (Note that the /local/ folder may not be visible in Finder).

If you’re on Linux, simply use your favourite package manager to install ffmpeg and ffmpeg2theora if you haven’t installed it already.

Further reading on HTML5 and <video>

For a general introduction into HTML5 video see the Dev.Opera blog and the Dive into HTML5 article. Gerrit van Aaken at Praegnanz.de has a handy overview of HTML5 fallback players.

HTML5 Video conversion script

Description: Bash script for video conversion of *.mov (quicktime) files to webm, x264 (.mp4) and theora (.ogv).

Download: html5_video [429.00B]

Add a comment

Previous comments