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

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

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!