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

Question

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

缩略图小提琴

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

原文由 ryan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

canvas.drawImage 必须基于html内容。

资源

这是一个更简单的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);
}

这种解决方案的好处是你可以根据视频的时间来选择你想要的缩略图。

原文由 Giu 发布，翻译遵循 CC BY-SA 3.0 许可协议