javascript - 如何在上传多个选定视频之前进行多个视频预览

Question

我一直在尝试配置下面的代码以实现多个视频预览，但它不起作用，并且仅适用于单个视频。有人可以帮助我吗？谢谢

这是我的 JavaScript 脚本代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>`enter code here`

<script type="text/javascript">

$(document).on("change", ".file_multi_video", function(evt) {

 var files = evt.target.files; // FileList object

  for (var i = 0; i < files.length; i++) {
        var f = files[i];
        // Only process video files.
        if (!f.type.match('video.*')) {
            continue;
        }


  var $source = $('#video_here');

      var source = document.getElementById("video_here");
      var source = document.createElement('video');//added now


   $source[0].src = URL.createObjectURL(this.files[0]);

  $source.parent()[0].load();


  }


});
</script>

      This is my HTML for video 



                                            <video  controls>

                                               <label for="select video">Select video/Multiple videos</label>

                                               <source  src="video/*"  id="video_here">
                                                    Your browser does not support HTML video.

                                                  </video>

                Here is my input type which contains the the file type for selecting files and here i include an attribute multiple for selecting multiple files

Answer 1

使用i for内的变量循环，使用 source 的单个声明，使用.appendChild()附加创建的 <video>元素到document.body或其他父元素

document.querySelector("input[type=file]")
  .onchange = function(event) {
    var files = event.target.files;
    for (var i = 0; i < files.length; i++) {
      var f = files[i];
      // Only process video files.
      if (!f.type.match('video.*')) {
        continue;
      }

      var source = document.createElement('video'); //added now

      source.width = 280;

      source.height = 240;

      source.controls = true;

      source.src = URL.createObjectURL(files[i]);

      document.body.appendChild(source); // append `<video>` element

    }
  }

<input type="file" accepts="video/*" multiple>