通过文件输入从视频文件创建缩略图 [英] Create thumbnail from video file via file input

问题描述

我试图从输入类型='文件'的形式从视频文件（mp4,3gp）创建缩略图预览。许多人都说这只能在服务器端完成。我发现这很难相信，因为我最近刚刚通过HTML5 Canvas和Javascript碰到了这个小提琴。

Thumbnail Fiddle

唯一的问题是这需要视频出现，点击播放，然后点击按钮捕捉缩略图。我想知道如果没有玩家在场并且用户点击按钮，是否有获得相同结果的方法。例如：用户点击文件上传并选择视频文件，然后生成缩略图。欢迎任何帮助/想法！

解决方案

Canvas.drawImage必须基于html内容。

源

这是一个简单的jsfiddle

  //和代码
函数capture（）{
 var canvas = document.getElementById（'canvas'）; 
 var video = document.getElementById（'video'）; 
 canvas.getContext（'2d'）。drawImage（video，0，0，video.videoWidth，video.videoHeight）; 
} 
  

这个解决方案的优点是您可以根据需要选择想要的缩略图视频的时间。

I am attempting to create a thumbnail preview from a video file (mp4,3gp) from a form input type='file'. Many have said that this can be done server side only. I find this hard to believe since I just recently came across this Fiddle using HTML5 Canvas and Javascript.

Thumbnail Fiddle

The only problem is this requires the video to be present and the user to click play before they click a button to capture the thumbnail. I am wondering if there is a way to get the same results without the player being present and user clicking the button. For example: User click on file upload and selects video file and then thumbnail is generated. Any help/thoughts are welcome!

解决方案

Canvas.drawImage must be based on html content.

source

here is a simplier jsfiddle

//and code
function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

The advantage of this solution is that you can select the thumbnail you want based on the time of the video.

这篇关于通过文件输入从视频文件创建缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！