如何从 JavaScript 应用程序中的视频创建缩略图 [关闭]

Posted 2023-03-13

【中文标题】如何从 JavaScript 应用程序中的视频创建缩略图 [关闭]

【英文标题】：How to create a thumbnail image from a video in a JavaScript Application [closed]

【发布时间】：2018-05-06 22:02:18

【问题描述】：

我想从视频创建缩略图，以便可以将其与视频本身一起上传到服务器。我曾尝试搜索 js 库来完成这项工作，但似乎找不到任何足够简单的库。

用户将从 a 中选择视频并希望能够从中创建缩略图，最后将视频和缩略图都上传到服务器。

你知道任何 js 库或者无论如何都可以做到吗？

【问题讨论】：

您可以使用 html 画布并让它渲染视频（在您想要的帧上暂停）。然后你可以从那里编辑它。

调用 canvas.toDataURL("image/png");它给出错误 SecurityError: 该操作不安全。我现在该怎么办？

视频必须与运行它的页面位于同一服务器上。您还应该使用canvas.toBlob()。它更快

@marvinralph 看看答案

这应该回答你的问题***.com/questions/19175174/…

【参考方案1】：

使用 Canvas，您可以捕获视频 Thumb。这是工作示例。

function thumbnail()
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

document.getElementById('capture').addEventListener('click', function()
	thumbnail();	
);

<button id="capture">
  capture
</button>
<canvas id="canvas"></canvas>
<video   id="video" controls>
   <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>

【讨论】：

您可以将视频渲染到画布并使用requestAnimationFrame() 更新画布。