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

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

let targetInput=document.getElementById（'video-input'）；
targetInput.addEventListener（'change'，函数（e）{
让视频元数据=（文件）=>{
返回新承诺（功能（解决、拒绝）{
让video=document.createElement（'video'）；
//video.preload='元数据'；
video.onloadedmetadata=函数（）{
//window.URL.revokeObjectURL（video.src）；
//console.log（video.src）
决心({
视频：视频，
持续时间：数学轮（video.duration*1000），
高度：video.videoHeight，
宽度：video.videoWidth
})
}
video.src=URL.createObjectURL（文件）；
})
}
videoMetaData（e.target.files[0]）。然后（函数（值）{
让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（快照）
})
})

---

我只能想到这一点：在创建：

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'，函数（e）{
让视频元数据=（文件）=>{
返回新承诺（功能（解决、拒绝）{
让video=document.createElement（'video'）；
//video.preload='元数据'；
video.addEventListener（'canplay'，函数（）{
决心({
视频：视频，
持续时间：数学轮（video.duration*1000），
高度：video.videoHeight，
宽度：video.videoWidth
});
});
video.src=URL.createObjectURL（文件）；
文件.正文.附件（视频）；
video.play（）；
})
}
videoMetaData（this.files[0]）。然后（函数（值）{
让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=新图像（）；
img.onload=函数（）{
document.body.appendChild（本文件）；
};
img.src=快照；
})
})
@T–n在您的浏览器控制台
console.log（snapshot）
上尝试过这个吗？图像结果是静止的blank@Myrealname是的，真的。我已经用你的例子更新了我的答案。添加后，没有任何内容是空白的。我的意思是不显示视频，而是显示图像，例如
@Myrealname哦，对不起。我已经更新了我的答案。我刚才在聚会上喝醉了。您可以使用
canplay
事件而不是
loadeddata
事件。要使事件
可以播放
，您需要播放视频。@Myrealname，因为我在您的问题中没有看到任何
标记，所以在本例中，我向正文添加了新图像<代码>快照

不再为空。