How to generate video thumbnail from input file in javascript?

Question

How to draw an image thumbnail of a video from input file? This is what i've tried so far

let targetInput = document.getElementById('video-input');

targetInput.addEventListener('change', function(e) {
    let videoMetaData = (file) => {
        return new Promise(function(resolve, reject) {
            let video = document.createElement('video');
            
            // video.preload = 'metadata';

            video.onloadedmetadata = function() {
                // window.URL.revokeObjectURL(video.src);
                // console.log(video.src)
                
                resolve({
                    video: video,
                    duration: Math.round(video.duration * 1000),
                    height: video.videoHeight,
                    width: video.videoWidth
                })
            }

            video.src = URL.createObjectURL(file);
        })
    }

    videoMetaData(e.target.files[0]).then(function(value) {
        let videoCanvas = document.createElement('canvas');
        videoCanvas.height = value.height;
        videoCanvas.width = value.width;
        videoCanvas.getContext('2d').drawImage(value.video, 0, 0)
        var snapshot = videoCanvas.toDataURL();

        console.log(snapshot)
    })
})

<input type="file" id="video-input" />

This code is working. You can see the result on your browser console, but why the image URI result was blank?

Answer 1

I can only think of this: You are missing to append the <video> element to the body after creating: document.createElement('video');

You just need to append it for testing:

// after this line
video.src = URL.createObjectURL(file);

// try this...
video.controls = 'controls';            
document.body.appendChild(video);

---

Update:

let targetInput = document.getElementById('video-input');

targetInput.addEventListener('change', function(e) {
    let videoMetaData = (file) => {
        return new Promise(function(resolve, reject) {
            let video = document.createElement('video');
            
            // video.preload = 'metadata';

            video.addEventListener('canplay', function () {
                resolve({
                    video: video,
                    duration: Math.round(video.duration * 1000),
                    height: video.videoHeight,
                    width: video.videoWidth
                });
            });


            video.src = URL.createObjectURL(file);

            document.body.appendChild(video);
            
            video.play();
        })
    }

    videoMetaData(this.files[0]).then(function(value) {
        let videoCanvas = document.createElement('canvas');

        videoCanvas.height = value.height;
        videoCanvas.width = value.width;
        videoCanvas.getContext('2d').drawImage(value.video, 0, 0);
        var snapshot = videoCanvas.toDataURL('image/png');

        var img = new Image();
        
        img.onload = function () {
          document.body.appendChild(this);
        };
        
        img.src = snapshot;
    })
})

<input type="file" id="video-input" />