1

Im trying to create a thumbnail from a video file in typescript. This is my code below:

createThumbnail(video_url: string) {
   let canvas: HTMLCanvasElement = document.createElement('canvas');
   let video: HTMLVideoElement = document.createElement('video');
   video.src = video_url;
   video.currentTime = 8;
   canvas.getContext('2d').drawImage(video, 0, 0, 200, 200);

   canvas.toBlob(b => { resolve(b) }, 'image/png');
}

It creates the image alright but blank. It just creates a blank image. What i'm i doing wrong in my code ?

marvin ralph
  • 1,100
  • 3
  • 23
  • 43
  • Posible duplicate of [video html5: Is it possible to display thumbnail from video on a specific time?](https://stackoverflow.com/questions/22607572/video-html5-is-it-possible-to-display-thumbnail-from-video-on-a-specific-time) – Ciro Spaciari Dec 16 '17 at 03:53
  • 1
    You should wait until the video elements emits the "loadeddata" or "canplay" event. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events – Siggy Dec 16 '17 at 03:54
  • I added a canplay and loadeddata event and they dont run. Below is my code: – marvin ralph Dec 22 '17 at 04:33
  • let canvas: HTMLCanvasElement = document.createElement('canvas'); let video: HTMLVideoElement = document.createElement('video'); video.currentTime = 8; video.onloadeddata = () => { canvas.getContext('2d').drawImage(video, 0, 0, 200, 200); canvas.toBlob(b => { resolve(b) }, 'image/png'); } – marvin ralph Dec 22 '17 at 04:34

0 Answers0