我如何在上传多个选定的视频之前进行多个视频预览 [英] how can i make a multiple video preview before uploading the multiple selected videos

问题描述

我一直在尝试配置以下代码，以实现多视频预览，但它无法正常工作，并且仅适用于单个视频. 有人可以帮我吗.谢谢

I have been trying to configure the code below in order to achieve a multiple video preview but its not working and it works well with only a single video. can someone out their help me please.Thanks

这是我的JavaScript脚本代码.

Here is my scripting code for 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

推荐答案

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

Use i variable within for loop, use a single declaration for source, use .appendChild() to append the created <video> element to the document.body or other parent element

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>

这篇关于我如何在上传多个选定的视频之前进行多个视频预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！