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

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

有办法吗？如果没有，有什么替代方案可以帮助我？

Answer 1

在现代浏览器中，您可以将URL APIURL.createObjectURL()与未附加的视频html" target="_blank">元素一起使用来加载文件的内容。

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>