上传多个选定视频后，如何为每个视频创建缩略图

Question

我正在尝试创建拖放区插件的几个视频文件(mp4.3gp(的缩略图预览。

我想为在输入中选择的每个视频创建一个缩略图(如果有 5 个视频，请创建 5 个缩略图(。我见过许多实现，但没有一个具有多个上下文。

任何帮助，不胜感激。谢谢。

// added file video in dropzone plugin
myDropzone.on('addedfile', function(origFile) {
var fileReader = new FileReader();
fileReader.addEventListener("load", function(event) {
var origFileIndex = myDropzone.files.indexOf(origFile);// FileList object
myDropzone.files[origFileIndex].status = Dropzone.ADDED;
var blob = new Blob([fileReader.result], {type: origFile.type});
console.log(blob)
var url = URL.createObjectURL(blob);
var video = document.createElement('video');//added now
var timeupdate = function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
video.pause();
}
};
video.addEventListener('loadeddata', function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
}
});
// Only process video files
if (!origFile.type.match(/mp4|MP4/)) {
myDropzone.enqueueFile(origFile);
return;
}
var snapImage = function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var arrText = new Array();
var  image = canvas.toDataURL();
var success = image.length > 100000;
if (success) {
var img = document.getElementsByClassName('imgthumbnail');
var l = img.length;
$.each(img,function(){
arrText.push(image);
});
for(var i=0; i < l; i++){
var t = img[i];
t.src = arrText[i];// add `src image` 
}
URL.revokeObjectURL(url);
}
return success;
};
video.addEventListener('timeupdate', timeupdate);
video.preload = 'metadata';
video.src = url;
// Load video in Safari / IE11
video.muted = true;
video.playsInline = true;
video.play();
}, false);
fileReader.readAsArrayBuffer(origFile);
});

上传多个视频文件后，将为每个视频共享视频的缩略图。

Answer 1

将 src 附加到变量 t 后，您忘记将其添加到 DOM 中。虽然捕获了预览，但它没有显示在任何地方。并且 img元素需要使用 "src" 属性(src 不适用于div(。

您可以创建img元素并将其附加到.imgthumbnaildiv：

$('<img>', {'src': arrText[i]}).appendTo('.imgthumbnail');

或者，您可以将缩略图传递给 Dropzone 并将其显示在上传的文件块中：

myDropzone.emit("thumbnail", origFile, arrText[i]);

在这种情况下，您可能需要进行一些样式调整以正确适应拖放区块中的缩略图。

要处理 3gp 文件，不要忘记将 3gp 扩展名添加到 type.match 选择器。