Javascript Dropzone js无法从服务器加载视频缩略图

从服务器加载上传的视频时，我遇到dropzone js问题

dropzone加载图片缩略图，但未加载视频缩略图

从这里检查一下

我想从ajax请求加载视频。这是我的代码：

     this.on("error", function(file, response) {
    $(file.previewElement).find('.dz-error-message').tooltip().attr('data-original-title',response);
  }); 
$.ajax({
    url: 'https://localhost/asnaf2019/userpanel/uploader.php',
    type: 'post',
    data: {request: 2},
    dataType: 'json',
    success: function(response){
        $.each(response, function(key,value) {
            var mockFile = { name: value.name };
            myDropzone_video.emit("addedfile", mockFile);
            myDropzone_video.emit("thumbnail", mockFile, value.path);
            myDropzone_video.emit("complete", mockFile);
        });
    }
});   
  this.on('addedfile', function(origFile) {
    var fileReader = new FileReader();
    fileReader.addEventListener("load", function(event) {
      var origFileIndex = myDropzone_video.files.indexOf(origFile);
      myDropzone_video.files[origFileIndex].status = Dropzone.ADDED;
      var blob = new Blob([fileReader.result], {type: origFile.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      if (!origFile.type.match(/mp4|MP4/)) {
        myDropzone_video.enqueueFile(origFile);
        myDropzone_video.removeFile(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('img-preview');
        var l = img.length;
        $.each(img,function(){
          arrText.push(image);
        });
        for(var i=0; i < l; i++){
          var t = img[i];
          myDropzone_video.emit("thumbnail", origFile, arrText[i]);  
        }
        URL.revokeObjectURL(url);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      video.muted = true;
      video.playsInline = true;
      video.play();
    });
    fileReader.readAsArrayBuffer(origFile);
  });

this.on（“错误”，函数（文件，响应）{
$（file.previewElement）.find（'.dz错误消息'）.tooltip（）.attr（'data-original-title'，response）；
}); 
$.ajax({
网址：'https://localhost/asnaf2019/userpanel/uploader.php',
键入：“post”，
数据：{请求：2}，
数据类型：“json”，
成功：功能（响应）{
$。每个（响应、功能（键、值）{
var mockFile={name:value.name}；
myDropzone_video.emit（“addedfile”，mockFile）；
myDropzone_video.emit（“缩略图”、mockFile、value.path）；
myDropzone_video.emit（“完成”，mockFile）；
});
}
});   
this.on（'addedfile'，函数（origFile）{
var fileReader=newfilereader（）；
fileReader.addEventListener（“加载”，函数（事件）{
var origFileIndex=myDropzone_video.files.indexOf（origFile）；
myDropzone_video.files[origFileIndex]。状态=Dropzone.ADDED；
var blob=new blob（[fileReader.result]，{type:origFile.type}）；
var url=url.createObjectURL（blob）；
var video=document.createElement（'video'）；
var timeupdate=函数（）{
if（snapImage（））{
video.removeEventListener（'timeupdate'，timeupdate）；
video.pause（）；
}
};
video.addEventListener（'loadeddata'，function（）{
if（snapImage（））{
video.removeEventListener（'timeupdate'，timeupdate）；
}
});
如果（！origFile.type.match（/mp4 | mp4/））{
myDropzone_video.enqueueFile（origFile）；
myDropzone_video.removeFile（origFile）；
返回；
}
var snapImage=函数（）{
var canvas=document.createElement（'canvas'）；
canvas.width=video.videoWidth；
canvas.height=video.videoHeight；
canvas.getContext（'2d'）.drawImage（视频，0，0，canvas.width，canvas.height）；
var arrText=新数组（）；
var image=canvas.toDataURL（）；
var success=image.length>100000；
如果（成功）{
var img=document.getElementsByClassName（'img-preview'）；
var l=img.长度；
$.each（img，function（）{
arrText.push（图像）；
});
对于（变量i=0；i

运行代码时显示此错误：

TypeError:FileReader.readAsArrayBuffer的参数1不存在 实现接口Blob

---

如何解决这个问题

我用这种方法解决这个问题

$.each(response, function(key,value) {
          var mockFile = { name: value.name};
          if (value.type.match(/mp4|MP4/)){ // Preview video only from type mp4
            myDropzone_video.options.addedfile.call(myDropzone_video, mockFile);
            var src = value.path;
            var video = document.createElement('video');
            video.src = src;
            video.addEventListener('loadeddata', 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 dataURI = canvas.toDataURL('image/png');
              myDropzone_video.emit("thumbnail", mockFile, dataURI);
            });
          myDropzone_video.emit("complete", mockFile);
         }
      });

我就这样解决了这个问题