Question

我正在网站上工作，而且我正在处理视频。

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

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帧。它给了我画布，我想把它们显示为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>

将画布显示为视频预览的gif

1 个答案: