通过文件输入从视频文件创建缩略图

我试图从input type='file'表单中的视频文件（mp4,3gp）创建缩略图预览。许多人都说这只能在服务器端完成。我觉得这很难相信，因为我刚刚使用HTML5 Canvas和Javascript碰到了这个小提琴。通过文件输入从视频文件创建缩略图

Thumbnail Fiddle

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

来源

2014-05-13 ryan

玩家显然必须在场，因为这是什么产生的图像捕获。 – vogomatix

你可以使用css隐藏播放器，并调用videoTag.play（）来开始播放。我建议跳入18秒，等待它显示，然后将其发送到画布drawImage例程。我用铬这种方式将电影文件夹变成了一个缩略图画廊，所以我可以向你保证它的工作。 – dandavis

做得很好的“dandavis”。现在可以将文件上传到某个服务器，或者可以在客户端完成。假设用户在他/她的桌面上选择一个视频，然后从输入内容中运行此脚本？ – ryan

Canvas.drawImage必须基于html内容。

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); 
}

这个方案的好处是，你可以选择你基于视频的时间要的缩略图。

来源

2015-04-22 18:53:33 Giu

这是非常好的，我会尽快使用，欢呼！（评论，因为我的upvotes今天使用 – ConorJohn

是他们的任何方式来做到这一点，而不需要加载视频文件 –

我只能得到视频大小0 0和白色图像 –

最近需要这一点，并做了相当长的一段测试和煮下来到最低限度，看到https://codepen.io/aertmann/pen/mAVaPx

有一些限制，其中它的工作原理，但还算不错的浏览器支持目前：Chrome浏览器，火狐，Safari，歌剧， IE10，IE11，Android（Chrome），iOS Safari（10+）。

video.preload = 'metadata'; 
video.src = url; 
// Load video in Safari/IE11 
video.muted = true; 
video.playsInline = true; 
video.play();

来源

2016-09-28 17:36:39

你的codepen似乎很好，但是当我尝试上传> 100MB的iPhone人像拍摄模式视频有时屏幕截图是空白的或有时他们不上传只FYI，我想画布大小为170×100如果你面临类似的问题iPhone肖像模式视频？ – vbjain

@vbjain不能说我有，对不起。 –

通过文件输入从视频文件创建缩略图

回答

相关问题