Javascript Generate Video Thumbnail from Video Url

How do I get a YouTube video thumbnail from the YouTube API?

Each YouTube video has four generated images. They are predictably formatted as follows:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (i.e., one of 1.jpg, 2.jpg, 3.jpg) is:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a URL similar to the HQ:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a URL similar to this:

https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above URLs are available over HTTP too. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example URLs above.

Alternatively, you can use the YouTube Data API (v3) to get thumbnail images.

How can I use javascript to get the thumbnail of an html5 video?

Yes, you can use video as image source for canvas. Just wrap the code as a function which takes video and size as arguments, and return a canvas element.

The video must be loaded and at the frame you want to snapshot.

function createThumb(video, w, h) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d");                // get context
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  return c;                                    // return canvas
}

The canvas can be inserted into DOM and used as the image holder. If you prefer an image element you would have to do a couple of more steps, as well as handle the asynchronous nature of image loading using a callback (or promise):

function createThumb(video, w, h, callback) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d"),                // get context
      img = new Image();                       // final image
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  img.onload = function() {                    // handle async loading
    callback(this);                            // provide image to callback
  };
  img.src = c.toDataURL();                     // convert canvas to URL
}

If you get problems with the size of the video frame, you can replace the drawImage() arguments with this:

ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);

Javascript - Generate thumbnail from video url where store in Microsoft Azure Blob

@Gary, I'd recommend checking this thread which may of help to your question. using the following tutorial

They used the following code:

    function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

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

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>