无法附加多个视频

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

我解决我自己的问题。这里的问题是我试图追加视频的地方。我试图将两个视频放在同一个<div>，但我注意到它在class="embed-responsive embed-responsive-16by9。这是将视频放在彼此顶部，因为它只允许看到一个响应<video>。在JavaScript我确信创建一个新的<div>每个视频：

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>"); 
    } 

作品正是我想现在它。

Answer 2

以下是一些使用各种良好实践使代码更清洁，更高效的代码。

例如，您不必检查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>