Create thumbnail from video file via file input

Canvas.drawImage must be based on html content.

source

here is a simplier jsfiddle

//and codefunction capture(){    var canvas = document.getElementById('canvas');    var video = document.getElementById('video');    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);}

The advantage of this solution is that you can select the thumbnail you want based on the time of the video.

Recently needed this and did quite some testing and boiling it down to the bare minimum, see https://codepen.io/aertmann/pen/mAVaPx

There are some limitations where it works, but fairly good browser support currently: Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+).

 video.preload = 'metadata'; video.src = url; // Load video in Safari / IE11 video.muted = true; video.playsInline = true; video.play();

Recently needed this so I wrote a function, to take in a video file and a desired timestamp, and return an image blob at that time of the video.

Sample Usage:

try {    // get the frame at 1.5 seconds of the video file    const cover = await getVideoCover(file, 1.5);    // print out the result image blob    console.log(cover);} catch (ex) {    console.log("ERROR: ", ex);}

Function:

function getVideoCover(file, seekTo = 0.0) {    console.log("getting video cover for file: ", file);    return new Promise((resolve, reject) => {        // load the file to a video player        const videoPlayer = document.createElement('video');        videoPlayer.setAttribute('src', URL.createObjectURL(file));        videoPlayer.load();        videoPlayer.addEventListener('error', (ex) => {            reject("error when loading video file", ex);        });        // load metadata of the video to get video duration and dimensions        videoPlayer.addEventListener('loadedmetadata', () => {            // seek to user defined timestamp (in seconds) if possible            if (videoPlayer.duration < seekTo) {                reject("video is too short.");                return;            }            // delay seeking or else 'seeked' event won't fire on Safari            setTimeout(() => {              videoPlayer.currentTime = seekTo;            }, 200);            // extract video thumbnail once seeking is complete            videoPlayer.addEventListener('seeked', () => {                console.log('video is now paused at %ss.', seekTo);                // define a canvas to have the same dimension as the video                const canvas = document.createElement("canvas");                canvas.width = videoPlayer.videoWidth;                canvas.height = videoPlayer.videoHeight;                // draw the video frame to canvas                const ctx = canvas.getContext("2d");                ctx.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);                // return the canvas image as a blob                ctx.canvas.toBlob(                    blob => {                        resolve(blob);                    },                    "image/jpeg",                    0.75 /* quality */                );            });        });    });}