generate-video-dumbnail
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

generate-video-dumbnail

npm bundle size NPM Downloads jsDelivr hits (npm) NPM Version

Video thumbnail generator for modern browsers. Supports Windows, macOS, AOS, and the ever-pesky iOS Safari(14+).

Blog post: Generating Video Dumbnails on iOS Safari with JavaScript 💩

Online Demo

Want to contribute? Please read the CONTRIBUTING.md.

Installation

npm install generate-video-dumbnail
yarn add generate-video-dumbnail
pnpm add generate-video-dumbnail

CDN

<script src="https://cdn.jsdelivr.net/npm/generate-video-dumbnail/dist/index.iife.js"></script>

Usage

import { generateVideoThumbnail } from 'generate-video-dumbnail';

const MY_VIDEO_URL = 'https://example.com/video.mp4';
const THUMBNAIL_POSITION = 1.3;

generateVideoThumbnail(MY_VIDEO_URL, THUMBNAIL_POSITION, {
  size: {
    width: 640,
    height: 200,
  },
  format: 'image/jpeg',
  quality: 0.88,
}).then(thumbnailUrl => {
  const img = document.createElement('img');
  img.src = thumbnailUrl;
  document.body.appendChild(img);
});

API

generateVideoThumbnail

function generateVideoThumbnail(
  videoUrl: string,
  position: number,
  options?: GenerateVideoThumbnailOptions,
): Promise<string>;
  • videoUrl: The URL of the video.
  • position: The position in seconds where the thumbnail should be generated.
  • options: Optional options.

GenerateVideoThumbnailOptions

type GenerateVideoThumbnailOptions = Partial<{
  size: Partial<{
    width: number;
    height: number;
  }>;
  format: 'image/jpeg' | 'image/png' | 'image/webp';
  quality: number;
  onBlobCreated: (data: { blob: Blob; blobUrl: string; thumbnailPosition: number }): void;
}>;
  • size: The size of the thumbnail. Defaults to the original video size.
    • width and height are optional. If only one is specified, the other will be calculated to maintain the aspect ratio.
  • format: The format of the thumbnail. Default is 'image/jpeg'.
  • quality: The quality of the thumbnail. Default is 0.3. Applies only if the format is 'image/jpeg'.
  • onBlobCreated: A callback function that is called when the thumbnail blob is created.
    • blob: The thumbnail blob.
    • blobUrl: The URL of the thumbnail blob.
    • thumbnailPosition: The position of the thumbnail in seconds.

LICENSE

MIT

Package Sidebar

Install

npm i generate-video-dumbnail

Weekly Downloads

6

Version

0.1.5

License

MIT

Unpacked Size

21.1 kB

Total Files

8

Last publish

Collaborators

  • gumball12