Dropzone JS не загружать миниатюру видео с сервера - PullRequest
Новая
       9

Dropzone JS не загружать миниатюру видео с сервера

0 голосов
/ 19 сентября 2019

У меня проблема с 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);
  });

эта ошибка отображается при запуске кода:

Ошибка типа: Аргумент 1 FileReader.readAsArrayBuffer не реализует интерфейс Blob.

как я могу решить эту проблему

1 Ответ

1 голос
/ 23 сентября 2019

Я использовал этот способ для решения проблемы 

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

Я решил эту проблему следующим образом.

...