How to create a thumbnail image from a video in a JavaScript Application

Question

I want to create a thumbnail from a video so it can be uploaded alongside the video itself to a server. I have tried searching for js libs to do the work but cant seem to find any that is simple enough.

The user would be selecting the video from a and want to be able to create a thumbnail from it and finally uploaded both the video and thumbnail to a server.

Do you know any js libs or anyway it could be done ?

You can use a HTML canvas and have it render the video (paused on the frame you want). You can then edit it from there. — Get Off My Lawn, Nov 23 '17 at 03:21
Calling canvas.toDataURL("image/png"); it gives error SecurityError: The operation is insecure. What do i do now ? — marvin ralph, Nov 23 '17 at 03:28
The video must be on the same server as the page that is running it. you should also use `canvas.toBlob()`. It is faster — Get Off My Lawn, Nov 23 '17 at 03:28
This should answer you question https://stackoverflow.com/questions/19175174/capture-frames-from-video-with-html5-and-javascript — Joshua, Nov 23 '17 at 04:27

score 4 · Accepted Answer · answered Nov 23 '17 at 03:27

Using Canvas you can capture the video Thumb. here is the working example.

function thumbnail(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}
document.getElementById('capture').addEventListener('click', function(){
 thumbnail(); 
});

<button id="capture">
  capture
</button>
<canvas id="canvas"></canvas>
<video width="320" height="240" id="video" controls>
   <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>

You could just render the video to the canvas and use `requestAnimationFrame()` to update the canvas. — Get Off My Lawn, Nov 23 '17 at 03:32

How to create a thumbnail image from a video in a JavaScript Application

1 Answers1

Linked