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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • By
    MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

  • By
    Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

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!