jquery - 视频文件放到 dropzonejs 后立即预览视频

Question

我正在使用 dropzonejs 删除文件，然后上传到服务器。我想实现当视频文件被删除时，它应该能够使用html5视频播放。这是我尝试过的地方，

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

我的计划(在engageVideo函数中)是找到刚刚添加的文件的路径并将其用作html5视频的src。但在此文件的 myDropzone 实例中，我无法找到该文件的 url(路径)。我可以在这里寻求帮助吗？有没有更好的方法？

Answer 1

看起来 dropzone 为您提供了一个文件列表，您可以像使用 native 一样使用它 <input type="file"/>文件列表。您应该能够将文件转换为 ObjectURL 并将其分配给视频播放器。

假设 <video id="preview" controls autoplay></video> 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;
   }
})