CODEWITHSUNDEEP
javascriptvideoduration
chennakeshav hegde
chennakeshav hegde

Reputation: 23

how to get duration of multiple video while uploading?

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<script>
function myFunction(){
    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++) {
                txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
            }
        }
    } 
    else {
        if (x.value == "") {
            txt += "Select one or more files.";
        } else {
            txt += "The files property is not supported by your browser!";
            txt  += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

<p><strong>Tip:</strong> Use the Control or the Shift key to select multiple files.</p>

</body>
</html>

In this, they are listing video file name and size. but how to list the duration of all the videos uploaded with the file name and file size.i can get single video duration while uploading. but having difficulty in finding when its multiple videos.

Upvotes: 2

Views: 1379

Answers (1)

jonasdev
jonasdev

Reputation: 736

You need to "load" the file into a video node and wait for the meta data of the file to be loaded and extract the duration from the loaded node. Here is a function to get the duration from a file. Note that this function returns a promise:

function getDuration(file) {
  let videoNode = document.createElement("video");
  let promise = new Promise(function(resolve, reject) {
    videoNode.addEventListener("loadedmetadata", function() {
      resolve(videoNode.duration);
    });
    videoNode.addEventListener("error", function() {
      reject(videoNode.error.message + "(" + videoNode.error.code + ")");
    });
  });

  const URL = window.URL || window.webkitURL;
  videoNode.src = URL.createObjectURL(file);

  return promise;
}

You can then call this function like this:

getDuration(file).then((duration) => {
  // duration in seconds (as float)
});

Note! You need to reimplement your loop to wait for the promise to finish before you concatenate the txt variable and output it.

Upvotes: 4

Related Questions