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 ๐
Want to contribute? Please read the CONTRIBUTING.md.
npm install generate-video-dumbnail
yarn add generate-video-dumbnail
pnpm add generate-video-dumbnail
<script src="https://cdn.jsdelivr.net/npm/generate-video-dumbnail/dist/index.iife.js"></script>
<script>
generateVideoThumbnail.generateVideoThumbnail(/* ... */);
</script>
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);
});
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.
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
andheight
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.