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>元素追加到{{1}或其他父元素

＆＃13;

document.body

＆＃13;

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

＆＃13;

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

1 个答案: