Rendering HTML5 Video with Handbrake

HTML5, HTML5 video, HandBrake

For my video server project, I needed to be able to show HTML5 videos in a wide variety of browsers. I also didn’t want to have to keep multiple copies of the video in different formats (there were a lot of videos, and space constraints). The closest I could get was using MediaElement.js, which provides a Flash player fallback. You should be able to put an MP4 encoded with the [h.264] video codec on your page, and have it work anywhere. It turns out it’s not that easy. (iPads, for instance, need a specific sound codec as well.)

After a lot of research, I came up with the following settings for HandBrake, which will create a video that works (in combination with MediaElement.js) on most if not all browsers, looks good, and has a small size. I’ve tested it on Windows using Firefox, Google Chrome, and Internet Explorer, on Linux using Firefox, and on the iPad using Safari. If you don’t want to enter all of these settings manually, you can download a handbrake presets file instead.

I developed these settings with the help of A “best settings” guide for Handbrake 0.9.9 as well as other pages linked to in the appropriate sections.

Output Settings

  • Container: Mp4
  • Large File Size: Off

    This enables 64bit support in the MP4 container.

    • Advantages
      • Removes the 4GB file size limitation.
      • Encoded files will not be corrupted if they breach the 4GB barrier when this option is selected.
    • Disadvantages
      • Some players do not support 64bit mp4 files.

    This option is not currently turned on by default due to possible compatibility issues. This may change in future versions when it is deemed that older devices are less common place.

  • Web Optimized: On

    This places the container header at the start of the file, optimizing it for streaming across the web. (This is what makes seeking without downloading the whole file possible.)

  • iPod 5G Support: Off

    We don’t need to support the iPod 5G, and this can apparently break compatibility with certain players.



  • Detelecine: Default

    This will automatically detect and handle telecining if necessary, but will have no impact if the video has not been telecined.

  • Decomb: Default

    This will automatically detect and remove combing if necessary, but will have no impact if the video does not have combing.

  • Deinterlace: Off

    Not needed; interlacing should be automatically removed by the decomb filter.

  • Denoise: Off

    Removes ‘speckling’ and ‘moving dots’ from a video; only needed if the video has this and will degrade the quality otherwise.

    For details on configuring, see: Fighting noise/grain in handbrake – custom denoise settings

  • Deblock: Off

    Removes ‘blocky’ compression artifacts from a video by smoothing them out; only needed if the video has this and will degrade the quality otherwise. Moving it futher to the right will smooth the video out more.

  • Grayscale: Off

    Turns the whole movie into grayscale. For movies which are already black and white, this doesn’t seem to affect the quality or file size at all. (I only tested this with one movie.)




Optimise Video

  • x264 Preset: ?

    This slider has the following options:

    Ultrafast — Superfast — Very fast — Faster — Fast — Medium — Slow — Slower — Very slow — Placebo

    Slower speeds create files which are smaller and higher quality; however, slower settings tend to give diminishing returns. The Handbrake manual suggests using something between Very Fast and Slow (highlighted above); Medium is a good balance, but use the slowest setting you can bear.

  • x264 Tune: None

    This is supposed to adjust various settings to optimize the transcoder for e.g. film or animation. When I tried it, though, it just made the file bigger without improving the quality. It’s probably better off left at None.

  • Fast Decode: Off

    This option is only useful with slower devices which struggle to play video files. (If you are encoding your video with such devices in mind, you’ll want to turn it on.)

  • H.264 Profile: Main

  • H.264 Level: Auto


  • Auto Passthru: Uncheck everything except AAC
  • Fallback: AAC (faac)

    You must enable Tools > Options > Audio and Subtitles > Show advanced audio passthru options and restart Handbrake to see these options.

    The iPad requires the audio to be in AAC format. These options use the existing AAC audio from the DVD if possible, and re-encode the DVD audio into AAC (using the faac library) otherwise.

    There should be one track, with the following options:

  • Source: (as preferrred, probably ‘English’)

  • Codec: Auto Passthru