Creating Micro Screencasts, Hosted For Free

As the saying goes, an image is worth a thousand words. But, compared to more modern vehicles of visual awe, the limits of an image become obvious. After all, images are just a static snapshot of a visual moment in time – powerful, for sure, but not the most powerful mechanism for communicating ideas quickly. That honor belongs to video, which can communicate a complex idea with ease whereas a static image alone can often fall short.

As a developer who writes a lot about what happens on my computer screen, I’ve found that a nice short video screencast is often the best solution for communicating a complicated idea or process. The solutions to do this are plentiful. Personally I use Recordit to take and share a short screencast when a screenshot just won’t do. When I run up against the limits of what I can do with a gif service like Recordit, I’ll then turn to something like Jing.

The popularity of sending videos to communicate online has recently made me think a lot about micro screencasts. A micro screencast, as I define it, is a short video that typically does not contain audio. Most screencasts have audio, micro screencasts typically don’t because gif’s don’t contain audio data. Micro screencasts are needed in situations where a static screenshot is not enough and introducing audio might overly complicate the production. I find that when writing about code, micro screencasts have become invaluable. They allow me to briefly show an idea or process with a short video. In this article, I’m going to discuss my process for creating micro screencasts and how you can get these videos hosted for free.

Creating Simple Micro Screencasts

As previously mentioned I use Recordit to capture short (120 frame limit!) micro screencasts. This is a free service that will capture and host a micro screencast in gif format. I’d imagine several other gif services have popped up since Twitter announced its support for animated gif’s.

Below is an example of a micro screencast taken with Recordit showing off the mobile/tablet simulator in AppBuilder.

image00

Gif’s are a great solution for quickly creating simple micro screencasts. The power of using a gif is in the fact that a lot of communication tools can instantly use a gif where text is expected (e.g. HipChat). In general they play most everywhere, loop by default, and have no plugin requirements. However when placing micro screencasts in an web article, online documentation, or an online book things start to become less than ideal. Allow me to explain.

  1. Most gif capturing/hosting services limit the duration and dictate the number of frames contained in the gif. It’s typically a couple of seconds. This isn’t going to work when needing to create a micro screencast lasting over a minute.
  2. Just like back in the good old Flash intro days, a video/animation that loops by default can be very annoying. Especially if you have several on the screen at the same time. Worse, anything animating will draw the users attention and this isn’t always the intent.
  3. The looping nature of a gif makes it difficult for viewers to determine the start and end of the animation. When the end bleeds into the beginning this can actually detract from what is trying to be communicated.
  4. Recording a high quality micro screencast that is around a minute results in a very large file. This is unacceptable considering that most clients will auto download the entire image file on page load.
  5. The viewer of the micro screencast can’t pause or scrub. The options they have, which is often times ok, is to simply watch the screencast in it’s entirety over and over again. However, scrubbing and pausing can quickly become critical, even if the video is less than a minute long.
  6. In general gif’s are slow, CPU burning, limited to the color space of 1987, and currently don’t stream.

Gifffer

I’ve resolved a couple of these issues by simply using something like gifffer that will stop the auto looping of a gif in a web page until the user clicks on the gif. Below I’m showing the micro screencast from above but having gifffer manage the playback instead of looping on page load.

image00

Using gifffer is simple. Include gifffer.min.js in your page.

<script type="text/javascript" src="gifffer.min.js"></script>

Instead of setting the src attribute on your image use data-gifffer.

<img data-gifffer="image.gif" />

After the page has loaded or after DOMContentLoaded, call Gifffer();.

The advantage of using gifffer is that the user can determine when they want the gif to be playing and when they don’t, as opposed to being at the mercy of an autoplaying gif that loops. Check out the Github repository for more details.

Using an animated-video-gif and gifffer is a quick fix solution and if I have one or two micro screencasts to place in a web page I use this method because of its simplicity and speed as it pertains to creation and distribution. However, this does not resolve several of the issues I previously mentioned. To resolve all issues I had to master a more involved process of authoring and distributing a video.

Creating Professional Micro Screencasts

To gain complete control over the production of a micro screencast we have to use a professional screencasting solution. Which one you use is less important than making sure you start with a professional screen capturing tool.

I use ScreenFlow on a Mac. Using ScreenFlow gives me complete control over the video recording and editing (i.e. cropping, clipping, etc.). My main motive for starting with something like ScreenFlow is so that I can add effects to the video. For example, I typically add a fading to white effect to the end of a screencast to clearly inform the user that the video has ended before it loops.

Once I’ve doctored/edited the video with my screencasting software I export a high quality web format (mp4 will do) so that I can then use a video to gif converter to create a gif file (I use GIFBrewery). The results of this process are shown below. Note the fade to white I added.

You can view the second screencast here (I have not embedded the gif due to it’s size, though you can see the gfycat hosted version below).

Hosting Screencasts

With a gif in hand the next step is to upload the gif to gfycat.com. They offer an account system to manage all of your uploads or you can just upload a gif with no account.

Now you might be wondering since gfycat permits video uploads, why didn’t I just upload my video file? Had I uploaded the mp4 file it would have been rejected because it’s longer than 15 seconds. By uploading a gif file instead of my original video file, there are no set restrictions on the size or length of the screencast by gfycat. Yup, I’m a hacker.

Now that my gif is uploaded to gfycat, I can make use of (i.e. hotlink too) the much smaller html5 video formats created from my gif by gfycat (six different video formats to cover the most browsers) as well as a the orginal gif file.

To embed my micro screencast in a webpage I use the <video> element to hotlink to the HTML5 videos hosted on gfycat.com. I still make use of the orginal gif as a last resort backup for those who view the page in a browser with no HTML5 video support. Also, I used the poster image provide by gfycat as the image seen in the video player before playing. All of the code is shown below.

<video width="100%" poster="http://thumbs.gfycat.com/FarDimGosling-poster.jpg" controls loop>
<source src="http://zippy.gfycat.com/FarDimGosling.webm" type="video/webm">
<source src="http://zippy.gfycat.com/FarDimGosling.mp4" type="video/mp4">
Sorry your browser doesn’t support html5 video, try an animated gif
<a href="http://giant.gfycat.com/FarDimGosling.gif">http://giant.gfycat.com/FarDimGosling.gif</a>
</video>

Benefits of This Process

By following this seemingly crazy process I have accomplished the following:

  1. No limit to the length of the screencast.
  2. Gif and video hosting/conversion for free.
  3. Instead of using a massively large gif file, most users will see the HTML5 video version, which is often 16 times smaller than it’s corresponding gif.
  4. Users get a useful video player that provides baseline features (i.e. not playing and looping on page load, length indicators, scrubbing, pause, etc.).
  5. Gained some streaming capabilities by using HTML5 video.

This is my process for crafting micro screencasts for articles and online books. If you have a better process for creating micro screencasts, hosted for free, I’d like to hear about it in the comments. Or, if you think I can improve this process, I want to hear about it.

Comments

  • Pingback: Dew Drop – October 23, 2014 (#1883) | Morning Dew()

  • Just used this approach and it works really well. My biggest problem was the 10–15 second long gifs I was creating were like 3–4 megs, so my blogs posts were enormously expensive to download. This solution is a pretty elegant workaround that gives the user a nicer experience than a plain ol’ gif.

    Thanks Cody!