Error creating thumbnails in a list

Asked

Viewed 65 times

0

You are pointing error in generateThumbnail and appendchild, I am trying to create thumbnails of each video, and their links are in the href of the tag a, I want you to create the canvas inside the tag a or li, I tried to create counting each one and running the function for each one, but returns me the error

var time = 6;
var video = document.createElement("video");
var thumbs = document.querySelectorAll("#playlist li a");
for (var x = 0; x < thumbs.length; x++) {
  video.addEventListener('loadeddata', function() {
    video.currentTime = time;
  }, false);

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

  video.preload = "auto";
  video.src = thumbs[x].href;

  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[x].appendChild(c);
  }
}
<ul id="playlist">
  <li><a href="http://blogger.com/video-play.mp4?contentId=203ac83dcf157d32" download="video">video 1</a></li>
  <li><a href="http://blogger.com/video-play.mp4?contentId=1dbd2acf80b18d44" download="video">video 2</a></li>
  <li><a href="http://blogger.com/video-play.mp4?contentId=5777446bc907a2be" download="video">video 3</a></li>
</ul>

javascript by: Mark Vaaz

var time = 10;
var video = document.createElement("video");
var thumbs = document.querySelectorAll("#playlist li a");

function t1() {
    video.currentTime = time;
}
function t2() {
    generateThumbnail(time);
}

for (let x = 0; x < thumbs.length; x++) {
  video.addEventListener('loadeddata', t1, false);
  video.addEventListener('seeked', t2, false);
  video.preload = "auto";
  video.src = thumbs[x].href;

  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[x].appendChild(c);
  };
}

His problem is that he’s only creating from the last link

  • Which error is pointed ? Can give more details?

  • João, explains +- what you want to do because you are setting the events of the video player, calling Thumbs[x] but it is inaccessible, your mistake is to use the wrong way to do what you want to do

  • If you explain what you want to do there we can solve this problem, only with the error there is no way.

  • I added an explanation +- (sorry for the delay, life ta race here kkk)

  • 1

    You should not use a function inside the looping, instead declare and function outside the looping

  • I tried to change here, but I haven’t had time try something like that code

  • worked well but only shows for a single, does not generate the other links

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.