Skip to content

Thumbnail Sheet

Generate a grid of preview thumbnails from a video — useful for video players, content management systems, and video search interfaces.

Quick example

typescript
import { ffmpeg } from "ffmpeg-kit";

const result = await ffmpeg.thumbnailSheet({
  input: "video.mp4",
  output: "sheet.jpg",
  columns: 4,
  rows: 3,
  width: 320,
});

console.log(result.count);  // 12 (columns × rows)
console.log(result.outputPath); // "sheet.jpg"

Function signature

typescript
function thumbnailSheet(options: ThumbnailSheetOptions): Promise<ThumbnailSheetResult>;

Options

ParameterTypeDefaultDescription
inputstringInput video file path
outputstringOutput image file path
columnsnumber4Number of columns in the grid
rowsnumber3Number of rows in the grid
widthnumber320Width of each thumbnail in pixels
paddingnumber2Padding between thumbnails in pixels
backgroundstring"black"Background color
qualitynumber85JPEG quality 1–100
skipStartnumber0Skip this many seconds from the start
skipEndnumber0Skip this many seconds from the end

How it works

  1. Divides the video duration into columns × rows equal intervals
  2. Extracts one frame from each interval
  3. Arranges frames into a grid image using tile filter
typescript
// 4×4 = 16 thumbnails across the full video
const result = await ffmpeg.thumbnailSheet({
  input: "movie.mp4",
  output: "preview.jpg",
  columns: 4,
  rows: 4,
  width: 240,
  skipStart: 60,   // skip opening credits
  skipEnd: 120,    // skip end credits
});

Result type

typescript
interface ThumbnailSheetResult {
  outputPath: string;
  count: number;      // total number of thumbnails in the grid
  columns: number;
  rows: number;
  sheetWidth: number;   // total image width in pixels
  sheetHeight: number;  // total image height in pixels
  size: number;         // file size in bytes
}

Released under the MIT License.