将画布显示为gif以进行视频预览

Question

我正在网站上，正在处理视频。

我需要在另一页上显示视频的gif预览/预告片，然后重定向到该视频。

到目前为止我发现和添加的内容

的HTML

<div id=thumbs></div>

的CSS

#video {width:320px}

JS

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() {
    var j = video.duration;
    var u = j/4;
    // now video has seeked and current frames will show
    // at the time as we expect
    generateThumbnail(i);

    // when frame is captured, increase
    i+=u;

    // if we are not passed end, seek to next interval
    if (i <= video.duration) {
        // this will trigger another seeked event
        video.currentTime = i;
    }
}, false);

video.preload = "auto";
video.src = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm";

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);
  thumbs.replaceChild(c, thumbs.childNodes[0]);
}

我要做的是从其网址获取视频，并在相同的时间获取5帧。 它给了我画布，我想将它们显示为gif或一系列图像。

Answer 1

由于只想显示它，而不是尝试生成gif，所以最简单的方法可能是自己制作动画。

您已经具有获取视频帧的代码，但是当前正在DOM中显示它，而一旦显示就将其遗忘。

您可以执行的操作是将这些帧直接存储为画布，并在定时循环中将所有这些画布绘制在最终可见的画布上。

 var thumbsList = []; // we will save our frames as canvas in here var delay = 500; // the speed of the animation (ms) 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); thumbsList.push(c); // store this frame in our list if (thumbsList.length === 1) { displayThumbs(); // start animating as soon as we got a frame } } // initialises the display canvas, and starts the animation loop function displayThumbs() { var c = document.createElement("canvas"); var ctx = c.getContext("2d"); c.width = 160; c.height = 90; thumbs.appendChild(c); startAnim(ctx); // pass our visible canvas' context } function startAnim(ctx) { var currentFrame = 0; // here is the actual loop function anim() { ctx.drawImage(thumbsList[currentFrame], 0, 0); // draw the currentFrame // increase our counter, and set it to 0 if too large currentFrame = (currentFrame + 1) % thumbsList.length; setTimeout(anim, delay); // do it again in x ms } anim(); // let's go ! } var i = 0; var video = document.createElement("video"); var thumbs = document.getElementById("thumbs"); /* OP's code */ video.addEventListener('loadeddata', function() { thumbs.innerHTML = ""; video.currentTime = i; }, false); video.addEventListener('seeked', function() { var j = video.duration; var u = j / 4; // now video has seeked and current frames will show // at the time as we expect generateThumbnail(i); // when frame is captured, increase i += u; // if we are not passed end, seek to next interval if (i <= video.duration) { // this will trigger another seeked event video.currentTime = i; } else { // displayFrame(); // wait for all images to be parsed before animating } }, false); video.preload = "auto"; video.src = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm"; 

 <div id=thumbs></div>