Generate Video Thumbnails Effortlessly with video_thumbnail Plugin

Published on by Flutter News Hub

Generate Video Thumbnails Effortlessly with video_thumbnail Plugin

The video_thumbnail plugin for Dart and Flutter provides a convenient way to generate high-quality thumbnails from video files or URLs. It offers customizable options to control the image format, resolution, and quality, enabling you to tailor thumbnails to your specific needs.

Installation

To use the video_thumbnail plugin in your Flutter project, add it as a dependency in your pubspec.yaml file:

dependencies:
  video_thumbnail: ^0.5.3

Methods

The video_thumbnail plugin offers two primary methods:

  • thumbnailData generates a thumbnail in memory.
  • thumbnailFile creates a thumbnail file on disk.

Usage

To generate a thumbnail from a video file, use the thumbnailData method:

final uint8list = await VideoThumbnail.thumbnailData(
  video: videofile.path,
  imageFormat: ImageFormat.JPEG,
  maxWidth: 128,
  quality: 25,
);

Here's how to generate a thumbnail file from a video URL:

final fileName = await VideoThumbnail.thumbnailFile(
  video: "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4",
  thumbnailPath: (await getTemporaryDirectory()).path,
  imageFormat: ImageFormat.WEBP,
  maxHeight: 64,
  quality: 75,
);

Code Examples

Generating a Thumbnail in Memory from Video File:

import 'package:video_thumbnail/video_thumbnail.dart';

Future generateThumbnailInMemory() async {
  final uint8list = await VideoThumbnail.thumbnailData(
    video: "path/to/video.mp4",
    imageFormat: ImageFormat.JPEG,
    maxWidth: 128,
    quality: 25,
  );

  return uint8list;
}

Generating a Thumbnail File from Video URL:

import 'package:video_thumbnail/video_thumbnail.dart';

Future generateThumbnailFileFromUrl() async {
  final fileName = await VideoThumbnail.thumbnailFile(
    video: "https://example.com/path/to/video.mp4",
    thumbnailPath: (await getTemporaryDirectory()).path,
    imageFormat: ImageFormat.WEBP,
    maxHeight: 64,
    quality: 75,
  );

  return fileName;
}

Customization Options

The video_thumbnail plugin provides several customization options:

  • imageFormat: Specify the output image format (JPEG, PNG, WEBP).
  • maxHeight: Define the maximum height of the thumbnail in pixels.
  • maxWidth: Define the maximum width of the thumbnail in pixels.
  • timeMs: Generate the thumbnail from a specific point in the video, specified in milliseconds.
  • quality: Control the quality of the thumbnail (0-100).

Advantages

  • Generate thumbnails from video files or URLs with ease.
  • Control the image format, resolution, and quality.
  • Support for iOS and Android platforms.

Note:

When specifying both maxHeight and maxWidth, the thumbnail will be scaled to fit within the specified dimensions while maintaining the original aspect ratio.

The plugin currently has a minor performance issue when generating WebP thumbnails on iOS using libwebp.

Flutter News Hub