Error creating thumbnails in a list

0

I'm getting error in generateThumbnail and appendChild, I'm trying to create the thumbnails of each video, and their links are in the href of tag a, I want to create the canvas inside the tag a or li, I tried to create counting each one and executing the function for each one, but it returns the error to me

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);
  };
}

Your problem is that you are only creating the last link

    
asked by anonymous 09.08.2018 / 20:54

0 answers