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