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

Question

我正在尝试创建 dropzone 插件的几个视频文件 (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 元素并将其附加到 .imgthumbnail div:

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

或者，您可以将缩略图传递给 Dropzone 并在上传的文件 block 中显示它:

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

在这种情况下，您可能需要进行一些样式调整以正确适合 Dropzone block 中的缩略图。

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