Simple animation with FFmpeg

Vlastimil Slinták

Yesterday, I decided to update this blog and use latest WordPress theme Twenty Seventeen. This theme has one awesome feature – video header on main page. You can see it in action right here if you are reading this blogpost on a big screen (more than 900px). Smaller displays will get static image only.

I decided to try this new feature and create simple animation. I used FFmpeg to stitch together some images and create a MP4 video in less then one hour…

The most difficult part was to prepare a scene. I arranged my board developed for Europe game, old multimeter and as a background I printed one of my schematics.

I shoot more than 20 photos before finally nailed it. The camera has to be set to manual mode – focus, aperture, shutter speed and ISO, every photo should have the same settings.

Cool… now to crop all images to 2000×1200 pixels and make a video.

FFmpeg is versatile video encoder and can be used from command line. You can install it by running apt-get install ffmpeg on Debian/Ubuntu and by brew install ffmpeg on Mac OS.

The magic words to start video encoding are:

$ ffmpeg -i ./in.ffconcat -vcodec h264 \
  -preset medium -vf format=yuv420p \
  -movflags +faststart -r 25 out.mp4

and the content of in.ffconcat file is:

ffconcat version 1.0
file logo-01.jpg
duration 1
file logo-02.jpg
duration 0.2
file logo-01.jpg
duration 2
file logo-02.jpg
duration 0.1
file logo-01.jpg
duration 2
file logo-01.jpg

FFmpeg reads this file and creates simple slideshow with defined duration for each file. The photo with LED turned off is logo-01.jpg and logo-02.jpg has LED on.

The result is short and small (~784 kB) video encoded with h264 codec and encapsulated into mp4 container:

Unfortunately, the header is cropped and its not possible to see all values on multimeter display. But hey… its still a success! :)

Few notes about video settings:

  • You have to use YUV planar colour space with 4:2:0 chroma subsampling, because this is the only colour space supported by older QuickTime (and Safari browser) for h264 videos.
  • Last image in concat file has to be repeated twice. This is due to some bug in FFmpeg.
  • The -movflags +faststart parameters will move some media informations to the beginning of file, which allows browser to start video even before it was completely downloaded from the server.