Generating Video Thumbnails With FFMPEG A Flowplayer tutorial

Quick start

This tutorial teaches you how to make thumbnail images out of your video files. Flowplayer can be set so that there is an initial "splash image" in place of the Flash object when the page loads. This makes your pages faster and smoother. A really killer feature of Flowplayer. Here you can see an example

Eating sushi on a Japanese Restaurant duration: 20 seconds

Happy Feet dancing in the car duration: 21 seconds

You can see the details of above setup from this demo. But here we continue generating those thumbnail images.

FFMPEG command line

Let's get to business. First you need a proper tool for generating thumbnails. FFMPEG comes to a rescue (again). Install it on your computer and open up the command line. Hit following command against your video file and you'll get a splash image from the first frame of the video.

ffmpeg -i [video_file] -f image2 -vframes 1 [output_image].jpg

Here [video_file] represents your video file and [output_image] is the generated thumbnail image. You may want to grab the thumb from another position from the video or you want to adjust the size of the thumb. Here are the command line options that are especially important in thumbnail generation.

option	description
i	path to the input video file. this can be in any format such as mov, avi, mpeg, flv ...
f	format of the outputted image. `image2` is suitable here for outputting JPG
s	dimensions of the outputted video. for example `320x240` (width x height)
vframes	number of video frames to record. supply `1` here for generating only one image as most people want. ignoring this argument will result to a multiple thumbnails taken in sequence from the file.
ss	grabs the image from given position of th video (in seconds)

Example

I took our promo video in it's original MOV format and issued a following command against it.

ffmpeg  -ss 12 -i flowplayer.mov -f image2 -vframes 1 flowplayer-12.jpg

It grabbed 12:th second from the movie and here it is:

Flowplayer thumbnail image

Take a look at a full list of FFMPEG options.

Injecting a Play button inside existing splash

This chapter is authored by David Techer from France. He will show you how to inject a "play button" inside an existing splash-image. This can be done with FFMPEG. We use following image

We will try to make a single image that contains both the play button and the splash image as follows.

This was achieved with following FFMPEG command.

ffmpeg -y -i simba.mp4 -an -ss 00:00:14.35 -r 1 -vframes 1 -f mjpeg  simba-withoutplay.png

Here the idea is to use ffmpeg too in order to injecting the "play button" in the original splash image. For the rest of the tutorial, whe have to

getting the dimensions of the "play image"
using ffmpeg with vhook options.

NOTICE: Ensure that your ffmpeg version has not been built with the flag '--disable-vhook'. By defaut, ffmpeg is built with the flag '--enable-vhook'.

2. Getting the dimensions of the "play image"

There is a lot of tools that can give you the dimensions. So you can use the tool of your choice. On my personal server, I use imgsize

root@olivia:~# imgsize play_text.png width="104" height="40"

I need to get the half of the width (52 = 104 /2) and the half of the height (20 = 40 /2). Now I get this, I can inject my "play button" on the "splash image".

3. FFMPEG Command line using vhook options.

Here is the command

ffmpeg -y -i simba.mp4 -an -ss 00:00:14.35 -r 1 -vframes 1 -f mjpeg  \
-vhook '/usr/lib/vhook/imlib2.so -x W/2-52  -y H/2-20  -i /path/to/play_text.png' simba-withplay.png

option	description
-vhooks '....'	tells ffmpeg to use vhook flag
/usr/lib/vhook/imlib2.so	the entire path to imlib2.so. Depending on your ffmpeg installation, just type `locate imlib2.so\|grep vhook` in order to find it. You should have to adapt it.
-x ...	the X position of the "play image". Here `W` represents the Width of the entire image. In order to placing the "play image" at the center of the "splash image", I have x = W/2-52...Remember that 52 = 104/2
-y ...	the Y position of the "play image". Here `H` represents the Height of the entire image. In order to placing the "play image" at the center of the "splash image", I have y = H/2-20...Remember that 20 = 40/2
-i ...	the image I want to add to the "splash image".

There is more

FFMPEG is truly a all-in-one tool for Flowplayer users and video developers. In addition to thumbnail generation it can also be used to

Convert a .wav, avi, .mpeg .. file to FLV or MV4
Turn X amount images to a video sequence
Convert any movie file to animated gif (uncompressed)

You can see more details about those tasks from 19 ffmpeg commands for all needs