输入视频文件时获取视频持续时间 [英] Get video duration when input a video file

问题描述

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

我面临的问题是，我无法找到一种方法来获得视频持续时间，只需选择它在输入。

我搜查了很多，我没有找到任何方法来获得持续时间。在下面的代码中，我尝试使用' file.duration '但不起作用，它只返回' undefined '。

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

 < div id =input-upload-file class =box-shadow> 
< span>上传！ （ღ˘⌣˘ღ）LT /跨度> <！ - 忽略文本面lol  - > 
< input type =fileclass =uploadid =fileUpname =fileUploadonchange =setFileInfo（）> 
< / div> 
  

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

 函数setFileInfo（）{
 showInfo（）; //更改div内容
 var file = document.getElementById（fileUp）。files [0]; 
 var pid = 1; 
 var Pname = file.name; 
 Pname = Pname.slice（0，Pname.indexOf（。））; //获取没有扩展名的文件名
 var Ptype = file.type; 
 var Psize = bytesToSize（file.size）; //变成KB，MB等... 
 var Pprior = setPriority（Ptype）; //返回1,2或3 
 var Pdur = file.duration; 
 var Pmem = getMemory（Psize）; //返回大小*（100 || 10 || 1）
 var Pown ='user'; 
 / *很多东西把这个信息扔到HTML * / 
 console.log（Pdur）; 
} 
  

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

modern browsers ，您可以使用URL API的 URL.createObjectURL（） 与非附加视频元素来加载文件的内容。

$ b

var myVideos = []; window.URL = window.URL || window.webkitURL; document.getElementById（'fileUp'）。onchange = setFileInfo; function setFileInfo（）{var files = this.files; myVideos.push（文件[0]）; var video = document.createElement（'video'）; video.preload ='元数据'; video.onloadedmetadata = function（）{window.URL.revokeObjectURL（video.src）; var duration = video.duration; myVideos [myVideos.length - 1] .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 +'\\\
'; }}

< div id =input-upload-档案class =box-shadow> <跨度>上传！ （ღ˘⌣˘ღ）LT /跨度> < input type =fileclass =uploadid =fileUpname =fileUpload>< / div>< pre id =infos>< / pre>

I'm doing a project with HTML and Javascript that will run local with local files. I need to select a file by input, get it information and then decide if I'll add to my list and reproduce or not. And if i decide to use it I'll have to put it on a queue to use later. Otherwise I'll just discard and select another file.

The problem that I'm facing is that I cant't find a way to get the vídeo duration just by selecting it on input.

I've searched a lot and I didn't find any method to get the duration. In this code below I tried to use 'file.duration' but didn't work, it just returns 'undefined'.

That's my input, normal as you can see.

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

And that's the function that I'm using to get all the information.

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

Is there way to do this? If not, what are the alternatives that can help me?

解决方案

In modern browsers, You can use the URL API's URL.createObjectURL() with an non appended video element to load the content of your file.

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>

这篇关于输入视频文件时获取视频持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！