JavaScript根据视频URL生成视频缩略图

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

但是我只得到了一张黑色的图像。

我猜测这是由于加载问题，但是找不到解决方案。

期待您的回复。

谢谢。

- Softalent

---

你使用的是什么类型的视频？当你使用<video>标签（没有画布）时，视频是否能正确播放？ - Dekel

是的，当我将它放在HTML中时，它播放得非常清晰。 - Softalent

视频是否与页面在同一源中？您在浏览器开发工具控制台中看到任何错误/警告/等吗？ - Jaromanda X

是的，我正在本地机器上工作，并使用相同的虚拟主机。 - Softalent

没有人能解决这个问题吗？我在尝试不可能的事情吗？ - Softalent

Answer 1

我遇到了同样的问题，通过使用 "loadeddata" 事件解决了它，但我也必须添加 cors 属性并播放/暂停视频：

var video = document.createElement('video');

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d')
video.addEventListener('loadeddata', function() {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  video.pause();

  var dataURI = canvas.toDataURL('image/jpeg');
  var img = document.createElement("img");
  img.src = dataURI;
  that.css('background-image', 'url(' + dataURI + ')');
}, false);

video.preload = 'metadata';
video.muted = true;
video.playsInline = true;
video.setAttribute('crossOrigin', 'anonymous');
video.src = $(this).data('src');
video.play();

- Dtnand

Answer 2

但是我得到的只是一张黑色图片。我猜测这是因为加载问题，但是找不到解决方法。期待您的回音。 很可能是因为在调用时还没有加载任何帧。

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节点（您插入的节点）的引用。

- tin

Answer 3

您可以安装npm包：video-metadata-thumbnails，然后像这样使用它：

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

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

- Wayne

---

不适用于Safari浏览器。 - Mr Khan