javascript从视频网址生成视频缩略图

Question

我将在 javascript 中从视频 url 生成视频缩略图。我需要通过ajax来完成。所以我遵循了这个方法。

var src = thumbnail; ///video url not youtube or vimeo,just video on server
var video = document.createElement('video');

video.src = src;

video.width = 360;
video.height = 240;

var canvas = document.createElement('canvas');
canvas.width = 360; 
canvas.height = 240;
var context = canvas.getContext('2d');

context.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
html += '<figure>';
html += '<img src="' + dataURI + '' + '" alt="' + item.description + '" />';
html += '<figurecaption>'+item.description+'</figurecaption>'
html += '</figure>';

但我得到的只是黑色图像。我猜是因为负载问题，但找不到解决方案。期待您的回音。

问候。

Answer 1

但我得到的只是黑色图像。我猜是因为负载问题，但找不到解决方案。期待您的回音。

这可能是因为在您调用时尚未加载任何框架：

context.drawImage(video, 0, 0, canvas.width, canvas.height);

您应该在收到一些“loadeddata”事件后执行此操作（检查https://developer.mozilla.org/en-US/docs/Web/Events/loadeddata）

所以你的代码将变成：

var src = thumbnail; ///video url not youtube or vimeo,just video on server
var video = document.createElement('video');

video.src = src;

video.width = 360;
video.height = 240;

var canvas = document.createElement('canvas');
canvas.width = 360; 
canvas.height = 240;
var context = canvas.getContext('2d');

video.addEventListener('loadeddata', function() {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    var dataURI = canvas.toDataURL('image/jpeg');
    html += '<figure>';
    html += '<img src="' + dataURI + '' + '" alt="' + item.description + '" />';
    html += '<figurecaption>'+item.description+'</figurecaption>'
    html += '</figure>';
});

请注意，这将是异步的，因此您可能必须更改对该html变量的处理方式，而是设置image.src = dataURI;，作为image对 Image DOM 节点（您插入的节点）的引用