输入视频文件时获取视频时长

Question

我正在用 HTML 和 Javascript 做一个项目，它将在本地运行本地文件。我需要通过输入选择一个文件，获取其信息，然后决定是否将其添加到我的列表中并进行复制。如果我决定使用它，我将不得不把它放在一个队列中以备后用。否则我将丢弃并选择另一个文件。

我面临的问题是我无法找到一种方法来仅通过在输入时选择它来获取视频持续时间。

我搜索了很多，但没有找到任何方法来获取持续时间。在下面的代码中，我尝试使用“ file.duration ”，但它没有用，它只是返回“ undefined ”。

这是我的输入，正常如您所见。

 <div id="input-upload-file" class="box-shadow">
   <span>upload! (ღ˘⌣˘ღ)</span> <!--ignore the text face lol -->
   <input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo()">
</div>

这是我用来获取所有信息的功能。

 function setFileInfo(){
  showInfo(); //change div content
  var file = document.getElementById("fileUp").files[0];
  var pid =  1;
  var Pname = file.name;
  Pname = Pname.slice(0, Pname.indexOf(".")); //get filename without extension
  var Ptype = file.type;
  var Psize = bytesToSize(file.size); //turns into KB,MB, etc...
  var Pprior = setPriority(Ptype); //returns 1, 2 or 3
  var Pdur = file.duration;
  var Pmem = getMemory(Psize); //returns size * (100 || 10 || 1)
  var Pown = 'user';
  /* a lot of stuff throwing this info to the HTML */
  console.log(Pdur);
}

有办法做到这一点吗？如果没有，可以帮助我的替代方案是什么？

原文由 davis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 现代浏览器 中，您可以使用带有非附加视频元素的 URL API URL.createObjectURL() 来加载文件的内容。

 var myVideos = [];

window.URL = window.URL || window.webkitURL;

document.getElementById('fileUp').onchange = setFileInfo;

function setFileInfo() {
  var files = this.files;
  myVideos.push(files[0]);
  var video = document.createElement('video');
  video.preload = 'metadata';

  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(video.src);
    var duration = video.duration;
    myVideos[myVideos.length - 1].duration = duration;
    updateInfos();
  }

  video.src = URL.createObjectURL(files[0]);;
}

function updateInfos() {
  var infos = document.getElementById('infos');
  infos.textContent = "";
  for (var i = 0; i < myVideos.length; i++) {
    infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n';
  }
}

 <div id="input-upload-file" class="box-shadow">
  <span>upload! (ღ˘⌣˘ღ)</span>
  <input type="file" class="upload" id="fileUp" name="fileUpload">
</div>
<pre id="infos"></pre>

原文由 Kaiido 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在继续执行更多代码之前，我需要验证单个文件，这是我在 Kaiido 的回答帮助下的方法！

用户上传文件时的onchange事件：

 $("input[type=file]").on("change", function(e) {

    var file = this.files[0]; // Get uploaded file

    validateFile(file) // Validate Duration

    e.target.value = ''; // Clear value to allow new uploads
})

现在验证持续时间：

 function validateFile(file) {

    var video = document.createElement('video');
    video.preload = 'metadata';

    video.onloadedmetadata = function() {

        window.URL.revokeObjectURL(video.src);

        if (video.duration < 1) {

            console.log("Invalid Video! video is less than 1 second");
            return;
        }

        methodToCallIfValid();
    }

    video.src = URL.createObjectURL(file);
}

原文由 ricks 发布，翻译遵循 CC BY-SA 4.0 许可协议