Creating thumbnails only with the video link

Question

Is it possible to create a thumbnails just by using the javascript video link? Without having to use php, or other tools when I want to use it in Blogger, it’s a bit limited to this side. Link template: http://blogger.com/video-play.mp4?contentId=6ffdd7d2229f9172

Answer 1

You can use the following code to take a frame of a specific time and create one canvas with the thumbnail image, change the variable time for the second desired.

var time = 6;
var video = document.createElement("video");
var thumbs = document.getElementById("thumbs");

video.addEventListener('loadeddata', function() {
	thumbs.innerHTML = "";
    video.currentTime = time;
}, false);

video.addEventListener('seeked', function() {
    generateThumbnail(time); 
}, false);

video.preload = "auto";
video.src = "http://blogger.com/video-play.mp4?contentId=6ffdd7d2229f9172";

function generateThumbnail() {
  var c = document.createElement("canvas");
  var ctx = c.getContext("2d");
  c.width = 160;
  c.height = 90;
  ctx.drawImage(video, 0, 0, 160, 90);
  thumbs.appendChild(c);
}

#video {width:320px}

<div id=thumbs>Carregando o video...</div>