HandBrake - From FLV to HTML5 Video

At YMM’s sister site FOSSwire, we offer a lot of video-based tutorial content. Up until this point, it’s been offered in Flash with OGG downloads available as a backup. With the <video> tag in HTML becoming a hot new standard, it seemed like a perfect time to jump aboard. But our old videos were encoded in FLV (pre-MP4 support in Flash) so we had to do some conversion. This tutorial will teach you how to turn your old FLVs into HTML5-friendly MP4 video files.

It’s important to mention that these MP4 files won’t work in every browser. Opera and (most) Gecko-based browsers won’t support MP4, preferring OGG Theora or Google’s WebM instead. Still, MP4 gets you Chrome, Safari (including the iPad), and the soon-to-be-released-if-we’re-lucky IE9 – a sizable chunk of browsers. You’ll certainly want a Theora backup though, and we’ll go over how to do that next week. FOSSwire has covered a bit of the codec madness, head there for more details.

Follow me past the jump to begin your journey toward HTML5 fun…

What you need

All you need is the free and popular HandBrake. Don’t be fooled by tutorials insisting you need a shareware product with a sleazy name like “Web Online Video Converter Pro X” – HandBrake is completely free, open source, and the real deal. It’s available for Mac OS X, Windows, Ubuntu, and Fedora, and other versions of Linux can use command line versions. This tutorial covers only the GUI releases.

How you convert

Easy: add your file as the source, pick your settings, and go!

Of course, there’s a bit more to it than that if you want your quality to be great. For FOSSwire, our source clips were screen captures, so when converted to MP4 the results with default settings were less than stellar. MP4, like all codecs in its family, is optimized for picture based content, rather than simple animation or broad swaths of color. It’s like JPG vs. GIF or PNG. Play with the settings on clip before you commit to anything.

Optimize MP4s for animation or screen capture

If you are like me and are trying to convert animation or screen capture-based content with higher quality results, take a peek in Handbrake’s advanced settings. For my screen capture content, I…

• encoded in two-pass mode. You have to be setting an average bit-rate or target file size for this to be an available option, but it gives you a drastic increase in results.
• increased Deblocking (anywhere from +1/+1 to +3/+3 can help)
• set the number of B-frames to anywhere between 5 and 9
• set Subpixel motion estimation to 9

Once you’ve got your settings to your liking, encode away.

If you’re still having trouble, look at your source FLV. The artifacts you’re seeing in the MP4 might just be carry-overs from the FLV (as I experienced more than once – oops!).

Optimize MP4s for traditional video

By default, the MP4 format is great at encoding traditional video. You can probably get away with default settings. If you’re having problems, look at the frames in question – do they have large areas of a single color? You might need to try some of the techniques listed above to see if you can increase your quality.

And as I mentioned above, if you’re still experiencing trouble, check your source vid. The artifacts might just be forgotten remnants of a bad first-gen encode.

Working in bulk

Although Handbrake doesn’t have a true bulk mode like other apps (such as the long missed and mourned VisualHub) it does have the ability to set a queue. Simply click the “Add to Queue” button located in the Handbrake toolbar. When all your files are ready, hit the “Show Queue” button and hit “Play” to get your encode on.

Convert away

I hope this tutorial helps you prep your content for the “next big thing” in web video. HTML5 will help lower the barriers to entry again in providing web video to a massive audience, and you’ll certainly want to be on the cusp of it.

HandBrake