VDO to GIFs

Introduction

Sometime, text hard to explain. Just see an image, it can explain more than 1,000 words !!!. In this example, I provided tool for labeling and collect data (for train ML model) on GitHub. To show how does it work, let's creating instruction video.

Wait!

File size too large for source control platform, you should provides only text or image. So let's convert video to animated image (.gif).

Installation

The conversion process requires the following command-line tools:

• ffmpeg to process the video file.
• gifsicle to create and optimize the an animated gif.

If you use homebrew and homebrew-cask software packages, just type this in:

ffmpeg

brew install ffmpeg

gifsicle

brew install gifsicle

[optional] For mountain-lion and above, dependency for gifsicle :

brew cask install xquartz

runs the XQuartz installer (YOU NEED TO UPDATE THE PATH) :

open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg

Ref. https://gist.github.com/dergachev/4627207

Basic

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

• Open "Quicktime Player",
• Go to File -> New Screen Recording
• Selected screen portion by dragging a rectangle, recorded 13 second video.
• Go to File -> Export -> As Movie
  • Saved the video in full quality with the filename in.mov

To convert in.mov into out.gif (filesize: 48KB), open Terminal to the folder with in.mov and run the following command:

ffmpeg -i in.mov \
-s 600x400 \
-pix_fmt rgb24 \
-r 10 -f gif - | \
gifsicle \
--optimize=3 \
--delay=3 > out.gif

Notes on the arguments:

• -r 10 tells ffmpeg to reduce the frame rate from 25 fps to 10
• -s 600x400 tells ffmpeg the max-width and max-height
• --delay=3 tells gifsicle to delay 30ms between each gif
• --optimize=3 requests that gifsicle use the slowest/most file-size optimization

To share the new GIF using Dropbox and Copy Public URL, run the following:

cp out.gif ~/Dropbox/Public/screenshots/Screencast-`date +"%Y.%m.%d-%H.%M"`.gif

Usage

Ex. For animate in README.md on GitHub :

ffmpeg -i ./assets/automate-test.mov \
-vf "scale=min(iw\,600):-1" \
-pix_fmt rgb24 \
-r 10 -f gif - | \
gifsicle \
--optimize=3 \
--delay=7 \
--colors 128 > out16.gif