Works with any backend npm install Zero dependencies

Video Thumbnail Extraction

Automatically extract a thumbnail frame from video files.

(function() {
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 accept: 'video/*',
 showThumbnails: true,
 generateVideoThumbs: true,
 autoUpload: false
 });
})();
How it works: The uploader creates a hidden video element, seeks to 1 second, and captures a canvas frame as the thumbnail.

A frame instead of a generic icon

generateVideoThumbs defaults to true. The component loads the video far enough to capture a frame and uses it as the queue preview, so a list of clips is distinguishable at a glance rather than a column of identical file icons.

What it costs and when to turn it off

Extracting a frame means the browser decodes part of the file, which is quick for a short clip and noticeable for a long one, especially on a phone. For a queue of many large videos the thumbnails may not be worth the delay before the upload starts; set it false and the queue falls back to names and sizes.