示例方法

Question

我找到了JavaScript代码来获取视频的缩略图，并给出了其URL。但是，我只在YouTube和Vimeo中找到了这个。似乎没有人列出如何使用html5视频标签嵌入视频的示例。可以吗？感谢。

Answer 1

是的，您可以将视频用作画布的图像源。只需将代码包装为一个将视频和大小作为参数的函数，然后返回一个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
}

画布可以插入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视频的缩略图？

1 个答案:

示例方法