Question

126

Get video duration when input a video file

rated 0 times [ 131] [ 5] / answers: 1 / hits: 113796 / 9 Years ago, thu, march 26, 2015, 12:00:00

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 its information and then decide if I'll add to my list and reproduce or not. And if Ii 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 can't find a way to get the video 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 it didn't work, it just returns 'undefined'.

This is 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 this is 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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

acaciac

Add To Favorites

Follow

Total Points: 317

Total Questions: 117

Total Answers: 128

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

answered 9 Years ago raymondd · Accepted Answer

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>