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-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.
-movflags +faststartparameters 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.