Create Screenshots from Videos

By  on  

The idea behind my Get the First Frame of an Animated GIF with ImageMagick post was to improve a page's performance by not loading an animated GIF automatically, but instead grab the first frame, display it, and allow users to "click to activate" the GIF.  That strategy would save on load time as well as GPU.  The best solution for animated GIFs was ImageMagick but what's best for video?  The answer is ffmpeg.  The following commands will allow you to export images (screen or frame shots) from a video!

First Frame

The most common use case is grabbing the first frame (or any individual frame at a given time) of a video.  You can accomplish that via:

ffmpeg -i myvideo.webm -ss 00:00:01 -vframes 1 first-frame.png

You'll want to adjust the -ss argument depending on what hour:minute:second mark you want the image to come from.

Frames at Second Intervals

If you want to extract images at given intervals of a video (hopefully a short video), you'd use the following:

ffmpeg -i myvideo.webm -vf fps=fps=1 screen-%d.png

The %d represents an incrementing number which is used to note the second number in the file name.

Frames at Minute Intervals

Now say you want to export images at minute intervals, as an entry point at different times in the video maybe, or you're the average porn site.  This will do:

ffmpeg -i myvideo.webm -vf fps=fps=1/60 screen-%03d.jpg

%03d means that ordinal number of each thumbnail image should be formatted using 3 digits.

Much like the ImageMagick utility used in my previous post, ffmpeg has been a staple of media management for several years.  It's very trusted, respected, and much like VLC player, you can throw just about any video file at it and get a result!

Recent Features

Incredible Demos

  • By
    Fancy Navigation with MooTools JavaScript

    Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple...

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

Discussion

  1. Ey, I’m just doing the same thing in a Laravel application at my work :)
    If it’s useful for anybody I’ve finally used this laravel plugin: https://github.com/PHP-FFMpeg/PHP-FFMpeg that uses ffmpeg as well.

  2. This is so amazingly simple! Just a single command and you have your desired frame from the video exported to be placed any where. Many thanks!

  3. mrcn

    how could i do this for every video in a folder?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!