Question

从服务器加载视频时，我的dropzone js出现问题。

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

从此link

进行检查

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

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

代码运行时显示此错误：

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

我如何解决此问题

Answer 1

我用这种方式解决问题

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

我已经用这种方式解决了这个问题。

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

1 个答案: