javascript - 如何从 JavaScript 中的输入文件生成视频缩略图？

Question

如何从输入文件中绘制视频的图像缩略图？这是我到目前为止所尝试过的

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" />

该代码正在运行。您可以在浏览器控制台上看到结果，但为什么图像 URI 结果为空？

Answer 1

我只能想到这一点:您缺少附加 <video>创建后将元素添加到正文:document.createElement('video');

您只需附加它进行测试即可:

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

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

---

更新:

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" />