Question

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

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

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

Answer 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 width="320" height="240" 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>

如何在JavaScript应用程序中从视频创建缩略图图像

1 个答案: