Generating Video Thumbnails with an Overlay Icon Using Node.js and FFmpeg

In this post, I’ll guide you through the process of creating video thumbnails programmatically using Node.js and the powerful FFmpeg library. We will also overlay a play icon on the generated thumbnails to give them a polished look.

Prerequisites

Before we start, ensure you have the following installed:

• Node.js
• FFmpeg
• A package manager like npm or yarn

You will also need to install the fluent-ffmpeg and uuid packages:

npm install fluent-ffmpeg uuid

The Code

Here’s a complete code snippet to generate a thumbnail from a video file and overlay a play icon on it.

const ffmpeg = require('fluent-ffmpeg');
const fs = require('fs');
const { v4: uuidv4 } = require('uuid');

// Define the input video path (can be a local file or a URL)
const inputPath = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

// Define the output folder path for the thumbnails
const outputPath = `${__dirname}/thumbnail`;

// Create the output folder if it doesn't exist
if (!fs.existsSync(outputPath)) {
  fs.mkdirSync(outputPath);
}

// Define the path for the play icon
const playIconPath = './play1.png';
var uuidfilename = uuidv4(); // Generate a unique filename

// Generate the thumbnail with the overlay
ffmpeg(inputPath)
  .screenshots({
    timestamps: [2], // Capture a thumbnail at 2 seconds into the video
    filename: `thumbnail-${uuidfilename}.jpg`, // Generate a unique filename
    folder: outputPath,
  })
  .on('end', () => {
    const thumbnailPath = `${outputPath}/thumbnail-${uuidfilename}.jpg`; // Path to the generated thumbnail
    const outputThumbnailPath = `${outputPath}/thumbnail-${uuidfilename}.jpg`; // Path for the output thumbnail with the overlay

    // Overlay the play icon on the generated thumbnail
    ffmpeg(thumbnailPath)
      .input(playIconPath)
      .complexFilter([
        {
          filter: 'overlay',
          options: {
            x: '(W-w)/2', // Center the overlay horizontally
            y: '(H-h)/2', // Center the overlay vertically
          }
        }
      ])
      .save(outputThumbnailPath)
      .on('end', () => {
        console.log('Thumbnail with play icon generated successfully.');
      })
      .on('error', (err) => {
        console.error('Error generating thumbnail with icon:', err);
      });
  })
  .on('error', (err) => {
    console.error('Error generating thumbnail:', err);
  });

Explanation

1. Setup and Dependencies: We start by requiring necessary modules: fluent-ffmpeg for handling FFmpeg commands, fs for file system operations, and uuid for generating unique filenames.
2. Input and Output Paths: The input video path can be a local file or a URL. We define an output folder for the thumbnails and create it if it doesn’t exist.
3. Generating Thumbnails: We use the screenshots method to capture a thumbnail at a specified timestamp (2 seconds in this case). The filename includes a unique identifier to avoid conflicts.
4. Overlaying the Play Icon: Once the thumbnail is generated, we overlay a play icon on it using the overlay filter. The overlay is centered both horizontally and vertically.
5. Error Handling: Proper error handling is included to catch and display any issues that may arise during the process.

Conclusion

Using this approach, you can easily automate the generation of video thumbnails with overlays for your projects. It’s a great way to enhance the visual appeal of your video content.

Feel free to modify the timestamps, output paths, and icon as per your requirements!

Next Steps

• Explore more FFmpeg features like video resizing and format conversion.
• Integrate this functionality into a larger video processing application.

Happy coding!