Gumball12 / generate-video-dumbnail

iOS Safari has issues generating video thumbnails.

generate-video-dumbnail

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

Blog post: How to Generate Video Thumbnails Correctly in iOS Safari 🔍

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>
<script>
  generateVideoThumbnail.generateVideoThumbnail(/* ... */);
</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