Question

此代码创建了一个视频的多个图像，但是我希望它仅生成一个图像，我知道它正在循环播放，但是如果我从循环中删除它，它将无限生成一个图像
我只需要获取一张图像，只有一张图像，当我尝试执行此操作时，它会无限重复，直到浏览器选项卡崩溃
如您所见，在运行代码段时它会生成几张图像，我只需要生成特定时间之一。

var i = 0;
var video = document.createElement("video");
var thumbs = document.getElementById("thumbs");

video.addEventListener('loadeddata', function() {
	thumbs.innerHTML = "";
    video.currentTime = i;
}, false);

video.addEventListener('seeked', function() {

    generateThumbnail(i);

    i++;

    if (i <= video.duration) {
        video.currentTime = i;
    }
	else {
		alert("done!")
    }

}, false);

video.preload = "auto";
video.src = "http://blogger.com/video-play.mp4?contentId=6ffdd7d2229f9172";

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.appendChild(c);
}

#video {width:320px}

<div id=thumbs>Loading video in background...</div>

Answer 1

删除此：

i++;

if (i <= video.duration) {
    video.currentTime = i;
}
else {
    alert("done!")
}

然后将var i替换为另一个变量，例如var time，然后您将获得特定秒的帧，例如var time = 6

var time = 6;
var video = document.createElement("video");
var thumbs = document.getElementById("thumbs");

video.addEventListener('loadeddata', function() {
	thumbs.innerHTML = "";
    video.currentTime = time;
}, false);

video.addEventListener('seeked', function() {
    generateThumbnail(time); 
}, false);

video.preload = "auto";
video.src = "http://blogger.com/video-play.mp4?contentId=6ffdd7d2229f9172";

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.appendChild(c);
}

#video {width:320px}

<div id=thumbs>Loading video in background...</div>

如何仅从视频javascript中获取1张图片

1 个答案: