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

Question

我正在尝试通过 input type='file' 格式的视频文件 (mp4,3gp) 创建缩略图预览。许多人说这只能在服务器端完成。我发现这很难相信，因为我最近才发现这个使用 HTML5 Canvas 和 Javascript 的 Fiddle。

Thumbnail Fiddle

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

Answer 1

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

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