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

Question

我已经找到JavaScript代码来获取视频的缩略图，并给出其URL。不过，我只能在YouTube和Vimeo上找到这个。似乎没有人列出了如何使用旨在嵌入html5视频标签的视频来实现此功能的示例。 可以这样做吗？ 谢谢。

Answer 1

是的，您可以使用视频作为画布的图像源。只需将代码封装为一个以视频和大小为参数的函数，并返回一个画布元素。

该视频必须加载并在您想要快照的帧。

示例方法

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