Display canvas as gif for video preview

问题

I'm working on a website and I am dealing with videos.

My need is to display a gif a a preview / teaser for the videos on another page, that redirects to the video.

What I found & added so far

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

What I do is I get a video from its Url and I get 5 frames at equal timing. It gives me canvas and I'd like to display them as a gif or a succession of images.

回答1:

Since you only want to display it, instead of trying to generate a gif, the easiest way is probably to do the animation yourself.

You already have the code to fetch the video frames, but you are currently showing it in the DOM, and forget about it once displayed.

What you can do from this, is to store these frames, directly as canvas, and draw all these canvases on a final, visible canvas, in a timed loop.

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>

来源：https://stackoverflow.com/questions/43139461/display-canvas-as-gif-for-video-preview