2

I am using dropzonejs to drop file and then upload to server. I would like to achieve when the video file is dropped, then it should be able to play using html5 video. Here is where I tried,

        this.on("addedfile", function(file, done) {
            var addedFile = jQuery(this.files[0].previewElement);
            if (file.type.match(/video.*/){
              engageVideo(addedFile)
            }

My plan(at engageVideo function) is to find the path of the file just added and use it to html5 video as a src. But in myDropzone instance of this file, I am not able to locate the url(path) of the file. Can I get help here ? Is there any better approach ?

1 Answer 1

1

It looks like dropzone gives you a file list that you can work with as if it was a native <input type="file"/> FileList. You should be able to convert the file to an ObjectURL and assign it to a video player.

Assuming a <video id="preview" controls autoplay></video> tag in the HTML:

this.on("addedfile", function(file, done) {
   var $previewEl = $("video#preview");

   if ($previewEl[0].canPlayType(file.type) !== "no"){
      var fileURL = URL.createObjectURL(file);

      $(previewEl).one('loadeddata', function(){
          URL.revokeObjectURL(fileURL);
      });
      previewEl[0].src = fileURL;
   }
})
2
  • This assumption you wrote above, "Assuming a <video id="preview" controls autoplay></video> tag in the HTML: .. " I can't find it anywhere. Dec 18, 2015 at 8:22
  • 1
    @underScorePassionFruit Add the assumption to your html page Oct 5, 2022 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.