如何从 JavaScript 应用程序中的视频创建缩略图 [英] How to create a thumbnail image from a video in a JavaScript Application
本文介绍了如何从 JavaScript 应用程序中的视频创建缩略图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从视频创建缩略图,以便将其与视频本身一起上传到服务器.我曾尝试搜索 js 库来完成这项工作,但似乎找不到任何足够简单的.
I want to create a thumbnail from a video so it can be uploaded alongside the video itself to a server. I have tried searching for js libs to do the work but cant seem to find any that is simple enough.
用户将从 a 中选择视频并希望能够从中创建缩略图,并最终将视频和缩略图上传到服务器.
The user would be selecting the video from a and want to be able to create a thumbnail from it and finally uploaded both the video and thumbnail to a server.
您是否知道任何 js 库或无论如何它可以完成?
Do you know any js libs or anyway it could be done ?
推荐答案
使用 Canvas 可以捕获视频 Thumb.这是工作示例.
Using Canvas you can capture the video Thumb. here is the working example.
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 应用程序中的视频创建缩略图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文