使用 javascript 生成视频缩略图答案

【问题标题】：Generate video thumbnails using javascript使用 javascript 生成视频缩略图
【发布时间】：2020-03-18 15:07:01
【问题描述】：

我正在尝试使用 javascript 创建视频的缩略图。我需要在视频加载时从视频创建缩略图并将其显示在画布中。示例代码如下。任何帮助，将不胜感激。

https://codepen.io/jeffin417/pen/vJxagb?editors=1010

var videoId = "video";
var scaleFactor = 0.25;
var snapshots = [];

document.getElementById(videoId).addEventListener(
  "loadeddata",
  function() {
    for (var jk = 0; jk < 60; jk++) {
      document.getElementById(videoId).currentTime = jk;
      var canvas = capture(document.getElementById(videoId), scaleFactor);
      canvas.onclick = function() {
        window.open(this.toDataURL());
      };
      snapshots.unshift(canvas);
      output.innerHTML = "";
    }
    output.appendChild(snapshots[0]);
  },
  false
);

function capture(video, scaleFactor) {
  if (scaleFactor === null) {
    scaleFactor = 1;
  }
  var w = video.videoWidth * scaleFactor;
  var h = video.videoHeight * scaleFactor;
  var canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
}

function shoot() {
  var video = document.getElementById(videoId);
  var output = document.getElementById("output");
  var canvas = capture(video, scaleFactor);
  canvas.onclick = function() {
    window.open(this.toDataURL());
  };
  snapshots.unshift(canvas);
  output.innerHTML = "";
  for (var i = 0; i < 4; i++) {
    output.appendChild(snapshots[i]);
  }
}

【问题讨论】：

看看here 和这个fiddle。这就是你要找的东西吗？
您基本上拥有所需的一切。有什么问题？
嘿，谢谢哥们，这正是我要找的，也许我应该搜索 mroe 关键字，请把你的作为答案，我会接受的，
@pawel 我试图设置当前时间并捕捉视频，但异步不起作用，现在我有答案了
喜欢这个？ codepen.io/anon/pen/XaMPKy?editors=1010

标签： javascript html reactjs

【解决方案1】：

要生成拇指，您可以尝试开源库 ffmpeg

这是生成拇指的流畅且最简单的方法。

示例命令

ffmpeg -i demo_dir/input.flv -ss 00:00:14.435 -vframes 1 demo_dir/out.png

您也可以点击此链接以获得更好的理解

https://trac.ffmpeg.org/wiki/Create%20a%20thumbnail%20image%20every%20X%20seconds%20of%20the%20video

【讨论】：

嗨，我将使用随机生成。所以我不认为我应该使用 ffmpeg ，我已经尝试过了，它会减慢进程

【解决方案2】：

您可以从这里获取代码：https://github.com/wangweiwei/video-metadata-thumbnails 或像这样使用它：

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';

const thumbnails = await getThumbnails(blob, {
  quality: 0.6
});
console.log('Thumbnails: ', thumbnails);

这里是Example

【讨论】：