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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Creating the Treehouse Frog Animation

    Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...

  • 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...

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!