Creating thumbnails with just the video link

Question

Creating thumbnails with just the video link

Navigation

#1 by (0 votes)

0

Is it possible to create a thumbnails just by having the javascript video link in hand? Without having to use php, or other tools if dealing with what I want to use in Blogger, it is somewhat limited to that side. Link template: http://blogger.com/video-play.mp4?contentId=6ffdd7d2229f9172

javascript video blogger

asked by anonymous 08.08.2018 / 03:24

1 answer

Guess Game Python Tkinter How to use type TBitmap32 (Delphi) in a DLL called in C ++?

score 0 · Accepted Answer

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

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>