如何使用 javascript 获取 html5 视频的缩略图？

Question

我找到了 JavaScript 代码来获取视频的缩略图，因为它 URL。但是，我只在 YouTube 和 Vimeo 上找到了这个。似乎没有人列出一个示例来说明如何处理打算嵌入 html5 视频标签的视频。可以吗？谢谢

Answer 1

是的，您可以使用视频作为 canvas 的图像来源。只需将代码包装为一个将视频和大小作为参数的函数，然后 return 一个 canvas 元素。

视频必须加载到您要截屏的那一帧。

示例方法

function createThumb(video, w, h) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d");                // get context
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  return c;                                    // return canvas
}

canvas 可以插入 DOM 并用作图像持有者。如果您更喜欢图像元素，则必须执行更多步骤，并使用回调（或承诺）处理图像加载的异步性质：

function createThumb(video, w, h, callback) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d"),                // get context
      img = new Image();                       // final image
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  img.onload = function() {                    // handle async loading
    callback(this);                            // provide image to callback
  };
  img.src = c.toDataURL();                     // convert canvas to URL
}

如果视频帧的大小有问题，可以将 drawImage() 参数替换为：

ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);

如何使用 javascript 获取 html5 视频的缩略图？

How can I use javascript to get the thumbnail of an html5 video?

javascript

video

html5-video

video-thumbnails

示例方法