Screencasts on a (Performance) Budget

How to record and optimize HTML5 video screencasts on Mac, iOS, and Windows 10

February 23, 2016 •

Occasionally I’ll run across the need to record a quick screencast for a blog post, client, or presentation. In the past I’ve made gifs with LiceCAP. Gifs can be large, have low framerates, and a low color profile. The better, free, easier, and more web performant way is HTML5 video.

Record with QuickTime on Mac and iOS

Screencasts are really easy on Mac and iOS if you have the hardware. QuickTime Player (the app you probably forgot you had) comes pre-installed.

Screenshot of iPhone recording over QuickTime

  1. Open QuickTime on your Mac
  2. File > New Screen Recording
  3. Click Record button to Start/Stop recording.
  4. CMD + T to Trim

QuickTime also works for recording iPhone screens. Plug-in your phone and select File > New Movie Recording (instead of “New Screen Recording”) and the phone becomes one of the camera options in the carrot dropdown.

Record with Xbox App on Windows 10

Recording on Windows leaves a little to be desired. The easiest way I’ve found is to use the brand new Xbox App in Windows 10.

Screenshot of Xbox app's Game DVR

  1. Win + G to Open the Xbox App Quick Launcher
  2. Win + Alt + R to Start/Stop recording
  3. Trim video in Xbox App > Game DVR
  4. Open Folder and copy/move video to Desktop

The final step is to delete video the video from Xbox App > Game DVR so your friends don’t see it on their Xbox Activity stream.

Optimize Screencasts with Handbrake

We could be done here, but whenever I post online I want it to be as small as possible. Never upload an un-optimized asset. To do this we’ll use Handbrake, an app for *ahem* “backing up” DVDs.

Screenshot of Handbrake UI

  1. Open Handbrake
  2. Click “Source” to select a video source
  3. Set a destination and unique filename (just incase things go wrong)
  4. Check “Web Optimized”
  5. Click “Start”

Be sure to save to a new file just in case things go wrong, re-recording screencasts is the hardest job on the Internet.

Results

In my experience, a 7.5mb video capture got crunched down to 188kb. A ~4000% improvement and is about 1/5ᵗʰ the size of the LiceCAP version but a much higher fidelity.

file type dimensions weight
sortby.gif gif 1210x780 940kb
lazyload.mp4 mp4 1680x1072 188kb

Not an identical test, but I think the results speak for themselves.

Embedding in your site

If you want that replicate gif-like autoplay behavior, here’s some code to get you going.

<video src="screencast.mp4" autoplay loop muted></video>

Note: autoplay videos and gifs have accessibility issues, especially for people with vestibular disorders. Consider not autoplaying and adding the controls attribute so users can stop the video.

Wrap up commentary

I wish Windows 10 had native screencasts. The Xbox App route is a hack and can only do one app at a time. It’s unfortunate that best/only recommendation for screencasts is a $299 piece of software. I think it would be in Windows’ interests to make screencasting easier, it’s like free marketing for your software.