Gumball12
generate-video-dumbnail
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 💩
Want to contribute? Please read the CONTRIBUTING.md.
Installation
npm install generate-video-dumbnail
yarn add generate-video-dumbnail
pnpm add generate-video-dumbnailCDN
<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.widthandheightare 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.