Videos often look best when the first frame is visible before playback begins – they’re known as poster frames. But until playback begins the first frame won’t have been downloaded. So a technique to achieve the desired effect is to initially display a static thumbnail image taken from the very first frame of video. When playback begins this preview image will disappear and the video will seamlessly start playing in its place. It’s the technique that the popular JW FLV Player uses.
But how do you create a JPEG from the first frame of a flash video?
FFmpeg is a great little tool for the job, describing itself as a “cross-platform solution to record, convert and stream audio and video”.
Capturing the first frame of an FLV is then a simple command line using FFmpeg:
1 | ffmpeg -i myvideo.flv -ss 0 -vframes 1 -vcodec mjpeg -f image2 preview.jpg |
If you’re using Windows, like me, you’ll need to navigate your terminal to the directory where you extracted ffmpeg.exe, before running the command (unless you’ve gone ahead and added it to your system path variable).
You’ll also need to replace “myvideo.flv” with the name of the actual video you want to extract a picture from. You should either put the video in the same directory as FFmpeg or make sure to specify the appropriate path to it. If everything goes right you’ll find “preview.jpg” created in the same directory as FFmpeg.
In case you’re wondering, the various switches given to FFmpeg in the above command have the following meaning:
- -i myvideo.flv
- Specifies that “myvideo.flv” is the input file
- -ss 0
- Starts from this moment in the video; can be either whole seconds or hh:mm:ss[.xxx]
- -vcodec mjpeg
- Forces the video codec to mjpeg
- -vframes 1
- Extracts 1 frame of video
- -f image2
- Forces the output file format to image2
- preview.jpg
- Name of the output file
You’ll find a complete description of all the possible FFmpeg parameters in the FFmpeg documentation.
As you can see you’re not limited to extracting just the first frame of video – you can extract whatever you want. So you may well decide that some other frame is a better representation of the video (and might be more enticing to viewers).
Update: 8th September 2009
Jakob Nielsen has briefly touched on what makes a good video thumbnail in his article about how social media outsourcing can be risky. In it he looks at the Massachusetts Governor’s website and shows how poorly chosen thumbnails can make it difficult for users to differentiate between several videos. If you pick a boring thumbnail then don’t be surprised if people don’t watch the video.
In my case I needed to use the first frame as a thumbnail to create the impression of a talking-head coming to life. Nielsen also has an opinion on that as well – talking-head video is boring.