Как получить длительность нескольких видео при загрузке? - PullRequest
Новая
       30

Как получить длительность нескольких видео при загрузке?

0 голосов
/ 12 ноября 2018 
<!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>

В этом списке перечислены имя и размер видеофайла.но как перечислить продолжительность всех видео, загруженных с именем файла и размером файла. Я могу получить длительность одного видео при загрузке.но возникают трудности с поиском, когда его несколько видео.

1 Ответ

0 голосов
/ 12 ноября 2018

Вам необходимо «загрузить» файл в видеоузел и дождаться загрузки метаданных файла и извлечь длительность из загруженного узла. Вот функция для получения длительности от file. Обратите внимание, что эта функция возвращает обещание: 

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

Затем вы можете вызвать эту функцию следующим образом: 

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

Примечание! Вам нужно переопределить цикл, чтобы дождаться завершения обещания, прежде чем объединить переменную txt и вывести ее.

...