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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

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

Incredible Demos

  • By
    MooTools Typewriter Effect Plugin Upgrade

    Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here...

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

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!