javascript - 无法附加多个视频

Question

function selectVideo() {
        var x = document.getElementById("myFile");
        var txt = [];
        if ('files' in x) {
            if (x.files.length == 0) {
                txt = "Select one or more files.";
            } else {
                for (var i = 0; i < x.files.length; i++) {
                    var file = x.files[i];
                    if ('name' in file) {
                        txt[i] = file.name;
                    }
                }
            }
        }
        else {
            if (x.value == "") {
                txt += "Select one or more files.";
            } else {
                alert("The files property is not supported by your browser!");
                console.log("The path of the selected file: " + x.value);
            }
        }

        console.log(txt); 

        for (var j = 0; j < txt.length; j++) {
            $("#chooseVideos").append(" <div id=\"vid" + j + "\" class=\"embed-responsive embed-responsive-16by9\">");
            $("#vid" + j).append("<video width=\"320\" height=\"240\"> <source src=\"videos/" + txt[j] + "\" type=\"video/mp4\"></video>");
        }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chooseVideos" class="container">
        <div id="choosevid">
            <input type="file" id="myFile" multiple onchange="selectVideo()" />
            <p id="demo"></p>
        </div>
 </div>

我试图在用户选择多个视频时附加它们。我有一个输入文件加载器，用户可以选择将哪些视频上传到网站。所有这些都工作正常，我将视频文件名保存到名为 txt 的数组中。问题是当我只使用两个视频进行测试时，它仅将视频附加到 txt[1] 处。这是我的代码:

for (var j = 0; j < txt.length; j++) {       
    $("#demo").append("<video width=\"320\" height=\"240\"> <source src=\"videos/" + txt[j] + "\" type=\"video/mp4\"></video>");
}

我什至尝试使用 javascript 而不是 jquery 来完成它，如下所示:

for (var j = 0; j < txt.length; j++) {

      var video = document.createElement("video");
      video.src = "videos/" + txt[j];        

      document.getElementById("demo").appendChild(video);
}

我希望它能够在 txt[0] 和 txt[1] 处附加视频，但它似乎默认为数组中的最后一个元素，并且仅附加该元素。我做错了什么？

作为引用，这里是我尝试附加它们的 html:

<div id="chooseVideos" class="container">
    <div id="choosevid" class="embed-responsive embed-responsive-16by9">
        <input type="file" id="myFile" multiple onchange="selectVideo()" />
        <p id="demo"></p>
    </div>
</div>

Answer 1

这里的一些代码使用了各种良好实践来使代码更简洁、更高效。

例如，您不必检查诸如 File 之类的内容包含 name ，因为它始终包含 name 。同样，您现在几乎不会遇到不支持 input[type="file"].files 的浏览器。 ，因此可以相对安全地假设它会在那里。

如果以下任何内容不清楚，请随时发表评论，提出具体问题以进行澄清。

$(function () {
  var $demo = $('#demo');
  var $temp = $('#video').children();
  var media = $temp[0];
  var $plce = $('#placeholder').children();

  $('#myFile').change(function () {
    var input = this;
    var files = input.files;
    var file, type;
    
    $demo.empty().each(function () {
      var src = $(this).find('source').attr('src');
      
      if (src) URL.revokeObjectURL(src);
    });
    
    if (files.length > 0) {
      for (var i = 0; i < files.length; i++) {
        file = files[i];
        type = file.type;
        
        if (media.canPlayType(type)) {
          $temp
            .clone()
            .appendTo($demo)
            .find('source')
            .attr({ type: type, src: URL.createObjectURL(file)});
        } else {
          $plce
            .clone()
            .appendTo($demo)
            .find('pre')
            .text(type);
        }
      }
    } else {
      $demo.text("No files selected");
    }
  }).change();
});

.template {
  display: none;
}

#demo > * {
  background-color: #222222;
  color: #FFFFFF;
}

.placeholder {
  display: inline-block;
  box-sizing: padding-box;
  width: 320px;
  height: 240px;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="template" id="video">
  <video width="320" height="240" controls>
    <source />
  </video>
</div>
<div class="template" id="placeholder">
  <div class="placeholder">
    <span>Cannot play video of type: <pre></pre></span>
  </div>
</div>
<div id="chooseVideos" class="container">
  <div id="choosevid" class="embed-responsive embed-responsive-16by9">
    <input id="myFile" type="file" accept="video/*" multiple />
    <p id="demo"></p>
  </div>
</div>