Question

我正在加载网页时从视频中创建缩略图，我正在使用jquery来做这件事。

所以我在html中有3个视频 -

    <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>

3个按钮和3个图像元素 -

<button onclick="clicker(0)">GET0</button>
<button onclick="clicker(1)">GET1</button>
<button onclick="clicker(2)">GET2</button>

    <img id="img0">
    <img id="img1">
    <img id="img2">

使用点击器功能，我可以创建每个视频的缩略图源并将其添加到每个img元素。 工作正常..

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

但是当放入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);

}

从我可以收集到的内容，canvas.toDataURL('image/jpeg'); 由于某种原因没有在forloop中运行

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

我无法看到任何差异？

Answer 1

所以似乎np.array和'inlay'不足以确保在jquery尝试从他们中删除图像之前已加载视频..

获取页面上加载的最后一个视频并添加一个事件监听器，当它完成时，运行该功能以从所有视频中翻录图像。

load

Answer 2

而是按原样保持你的功能，（因为它工作正常）并在循环中调用它：

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

Jquery不在for循环中工作但在click上工作？

2 个答案: