在Typescript中创建视频缩略图的问题

Question

我试图从视频文件生成缩略图图像。这是我的代码：

let canvas: HTMLCanvasElement = document.createElement('canvas');
let video: HTMLVideoElement = document.createElement('video');
video.src = video_url;
video.currentTime = 4;

video.onloadedmetadata = () => {
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;

   video.currentTime = 4;
};

video.onloadeddata = () => {
    video.currentTime = 4;
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    canvas.toBlob(thumbnailBlob => { grabThumbnail(thumbnailBlob) }, 'image/png');
};

它会创建图像，但只是一个空白图像。没有从currentTime属性获取视频帧。我做错了什么？

Answer 1

在video.currentTime=4行上设置的属性本质上是异步的，不会立即给出帧图像。您必须为事件seeked添加事件侦听器。在此事件侦听器方法中，您可以在此时生成帧的缩略图。

让我知道它是否有效。