How to encode video and screencasts optimally for the web – Part 2

In my previous post about How to make video that's optimized for the web, I introduced the need to make web video and screencasts web ready in order to minimize inefficiencies in settings and file bloatedness that contribute to the occasional stuttering and sputtering videos.  Your viewers won't stand for it; they'll click away.  You could lose visitors.  Worse, you could lose sales if your videos are part of a marketing campaign.

And, as I mentioned in my last post, while this isn't really an issue if you host on popular sites like YouTube, making web video and screencasts web ready is an issue if the videos are self-hosted.  Good news: there's an app for that.  :)

Handbrake is free software you can use to make web video optimized for self hosting.  There are versions for the PC and the Mac.

In the screencast above I'll show you the absolute minimum settings you need to make in Handbrake in order make sure your self-hosted web videos are compatible with virtually all platforms.  Meanwhile, I took the liberty of listing the quicksteps below in case you want to bookmark this page for future reference.

Quicksteps for settings optimizing web video using the free Handbrake software

  1. Preferences menu.  De-select the option for "Use iPod/iTunes friendly (.m4v) file extension for MP4"
  2. Main window.
    1. Choose the Source button.  Select the video you want to optimize for the web.
    2. Under Format.  Choose "Mp4 file."
    3. Choose (enable) the Web Optimized checkbox.
  3. Main window / Video tab.
    1. Under Video Codec, choose "H.264"
  4. Main window / Audio tab.
    1. Under Bitrate, choose 128.
  5. Main window / Advanced tab.
    1. Next to Reference Frames, choose "4."
  6. Back to Main window / Video tab.
    1. In the Quality section, choose Average bitrate.  Use the following rules of thumb to set bitrate value:
      1. For screencasting / screencast recordings:  use 600
      2. For live action videos / "talking heads":  use about 700 to 800
    2. Enable the checkbox labeled "2-pass encoding"
  7. Main window:
    1. In the Destination field, choose the folder where you want your converted (transcoded) file to be stored.
  8. In the tool bar, choose "Start."

Does this help?  Also, I'm curious, what do you typically do for hosting videos?  Do you self-host?  Or, do you prefer YouTube, or some other hosting service?

Ready to learn the Screencasting Wizard's secrets?Learn to teach online. Go beyond PowerPoint: learn to screencast using Camtasia Studio for Windows, Camtasia for Macintosh, or ScreenFlow for Macintosh. Watch the free previews now and read the topics list on our 5-star rated screencasting courses. Click here to learn more.

Related Articles:

About Mel

Mel is the online training architect and screencasting wizard at Kareo, one of Forbes' 2013 list of 100 Most Promising Companies in America. He's also the creator of Digital-Know-How, a training website devoted to developing learners' skills for screencasting and web video course development. Mel is also the chief blogger of; Mel's personal blog. The comments and opinions you read here are Mel's and not associated with any other company.
This entry was posted in Easy Video Player, How to, screencasts, video blogging and tagged , , , . Bookmark the permalink.

5 Responses to How to encode video and screencasts optimally for the web – Part 2

  1. Great tutorial Mel! I’ve been using Handbrake for about a year now and never really knew how to set up for hosted web delivery. I kind of have some hit and miss recipes. This helps a lot, especially the bit rate settings. I’ve used the RF slider in the past. Still works, but not ideal. Hoping your method produces sharper results.

    One thing that I usually have to do is resize my screen captures. Mostly because I record at larger sizes because the software I’m demonstrating doesn’t shrink down small enough when capturing with Camtasia Mac, for example, or going from HD live recordings to a web size. How do you recommend re-sizing in Handbrake. Would love a tutorial on that!

    Thanks again!

    • Mel Aclaro says:

      Hi Marlene.  Great suggestion.  I’ll put that on the list for an upcoming blog post.  But, just so I don’t leave you hanging in the meantime, I can share that what I typically do is one of two things (and usually I do point “b” below):

      a.  Edit in 1080p or 720p (for high def) or 1024 x 768 (for standard def) and then — in the case of self-hosting — I’ll render the final video in MP4 format and with the same dimensions I plan on using for the website in which it will be displayed.  Typically, those dimensions are 640 x 480 or 640 x 360, depending on the aspect ratio of the original video.

      b.  (More common) – I edit using the dimensions I listed in “a”, and then I render in MP4  and using same dimensions I used for editing.  But, then I control the presentation dimensions using administrative parameter settings provided by the player.  Easy Video Player does this very easily in the Settings panel.  

      I hope this helps!  

  2. Manuel says:

    These settings are working great for my screencasts!! Thanks for sharing this article! I was using camstudio for full screen recordings. I converted 900 Mb worth of recordings down to 38 Mb! I used to send them zipped to my clients but I can now finally start hosting them :)

    • Mel Aclaro says:

      Thanks for taking time to say so, Manuel.  That’s awesome; I’m glad it helped.  :)

  3. Rick de Koning says:

    Hi Mel,
    When using Handbrake version – 64 bit version the menuoptions have changed. Tried to make an outline, but at step 5 I’m missing the frame reference. Any ideas on that?

    My Outline for version – 64 bit .

    First Go to Tools – options – Preferences (Left) choose Output Files – MP4 file Extension choose ‘Always use MP4’ and use close button below.

    2 Main window.
    a) Choose the Source button. Select the video you want to optimize for the web.
    b) Under Output Settings and container choose ‘MP4’
    c) Choose (enable) the Web Optimized checkbox.

    3 Video Tab
    Under Video, choose ‘H.264 (x264)

    4 Audio tab
    Under Bitrate, choose 128.

    5 Advanced tab (!! can’t find this one anymore !!)
    Next to Reference Frames, choose “4.” –

    6 Video tab.
    a) In the Quality section, choose Average bitrate.
    Use the following rules of thumb to set bitrate value:
    For screencasting / screencast recordings: use 600
    For live action videos / “talking heads”: use about 700 to 800

    b)Enable the checkbox labeled “2-pass encoding”

    7 Main window:
    In the Destination field, choose the folder where you want your converted (transcoded) file to be stored.
    In the tool bar, choose “Start.”

Comments are closed.