Javascript Jquery不在for循环中工作，但在单击时工作？

加载网页时，我正在从视频创建缩略图，我正在使用jquery来实现这一点

所以我有3个html格式的视频-

    <video  width="320" height="240" controls poster="">
  <source src="small.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>
        <video  width="320" height="240" controls poster="">
  <source src="small.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>
        <video  width="320" height="240" controls poster="">
  <source src="small.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

但当放入forloop时

function clicker(i) {
  var video = $("video")[i];
  console.info(video);
  var canvas = document.createElement('canvas');
  canvas.width = 320;
  canvas.height = 240;
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  var dataURI = canvas.toDataURL('image/jpeg');
  $('#img'+i).attr("src", dataURI);
}

for（var i=0；i<$（“视频”）.length；i++{
var video=$（“video”）[i]；
控制台信息（视频）；
var canvas=document.createElement（'canvas'）；
画布宽度=640；
canvas.height=480；
var context=canvas.getContext（'2d'）；
context.drawImage（视频，0，0，canvas.width，canvas.height）；
var dataURI=canvas.toDataURL（'image/jpeg'）；
$（'#img'+i）.attr（“src”，dataURI）；
}

据我所知，下面是canvas.toDataURL（'image/jpeg'） 由于某种原因，没有在forloop中运行

图像源只是黑色图像，根本不起作用

---

我看不出有什么不同？

相反，保持函数的原样（因为它工作正常），并在循环中调用它：

for (var i = 0;  i < $("video").length; i++) {   

  var video = $("video")[i];
  console.info(video);
  var canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  var dataURI = canvas.toDataURL('image/jpeg');
  $('#img'+i).attr("src", dataURI);

}

for（var i=0；i<$（“视频”）.length；i++{
点击器（一）；
}

因此，

load

和

ready

似乎不足以确保在jquery尝试从视频中删除图像之前已加载视频

获取页面上加载的最后一个视频并向其添加事件侦听器，完成后，运行函数从所有视频中删除图像

for (var i = 0;  i < $("video").length; i++) {   
       clicker(i);
}

---

是否已将for循环放在$（document）.ready（function（）{…}）中；或$（function（）{…}）或以其他方式确保for循环成功运行？是的，尝试将其放入其中，并且它确实正在运行。是否尝试将for循环放入

$（窗口）中。在（'load'，function（）{//for loop here}）？相反，在一个文档中，请在JSBIN live demo中提供一个示例。这与您的问题无关，但您为什么要在每次迭代中使用
for
循环并重新选择所有视频元素，而不仅仅是执行
$（“视频”）。each（）
？这不是问题的答案，而是一种解决方法。
for (var i = 0;  i < $("video").length; i++) {   
       clicker(i);
}

$('video')[$('video').length - 1].addEventListener('loadeddata', function() 
        {
            getImages();
        });

  function getImages(){


    $("video").each(function(index, value)
    {
            var video = value;
                console.info(video);
                var canvas = document.createElement('canvas');
                canvas.width = 640;
                canvas.height = 480;
                var context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                var dataURI = canvas.toDataURL('image/jpeg');
                $('#img'+index).attr("src", dataURI);
                video.setAttribute('poster', dataURI);
        });
    }