javascript - 将 Canvas 显示为 gif 以进行视频预览

Question

我正在开发一个网站并处理视频。

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

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

我所做的是从其 URL 获取视频，并同时获取 5 帧。它为我提供了 Canvas ，我想将它们显示为 gif 或一系列图像。

Answer 1

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

您已经有了获取视频帧的代码，但您当前正在 DOM 中显示它，一旦显示就忘记它。

您可以做的是将这些帧直接存储为 Canvas ，并在定时循环中将所有这些 Canvas 绘制在最终的可见 Canvas 上。

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>