javascript从视频url生成视频缩略图

Posted 2023-05-07

【中文标题】javascript从视频url生成视频缩略图

【英文标题】：javascript generate video thumbnail from video url

【发布时间】：2017-03-01 20:03:14

【问题描述】：

我将从 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 + '' + '"  />';
html += '<figurecaption>'+item.description+'</figurecaption>'
html += '</figure>';

但我得到的只是黑色图像。 我想这是因为负载问题但找不到解决方案。 期待您的来信。

问候。

【问题讨论】：

您使用的是什么类型的视频？使用<video> 标签（无画布）时，视频能否正常播放？

是的。当我把它放在 html 中时，它播放得非常清楚

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

是的，我在本地机器和同一个虚拟主机上工作。

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

【参考方案1】：

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

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

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

【讨论】：

在 safari 上不起作用。

【参考方案2】：

我遇到了同样的问题，我通过使用“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();

【参考方案3】：

但我得到的只是黑色图像。我想这是因为负载问题但找不到解决方案。期待您的来信。

这可能是因为在您调用的位置还没有加载任何帧：

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 + '' + '"  />';
    html += '<figurecaption>'+item.description+'</figurecaption>'
    html += '</figure>';
);

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