Get video duration when input a video file

videojs get video duration
get video duration from url
get-video-duration angular
amazon s3 get video duration
get video duration from url android
how to get video duration in java
get-video duration nodejs
html5 video get duration

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>

Get video duration before upload - JavaScript, but there is a way to get a video duration ? <title>Get duration of video element </title> </head> <body> <input type="file" id="myUploader"/>� You need to divide video duration by 60 to get minutes, then use parseInt with radix 10. We should test if video duration > 0 before our division. var minutes = parseInt(video.duration / 60, 10);

I needed to validate a single file before continuing to execute more code, here is my method with the help of Kaiido's answer!

onchange event when a user uploads a file:

$("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
})

Now validate duration:

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

Get video duration when input a video file, 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. Get the duration of a video file. Contribute to caffco/get-video-duration development by creating an account on GitHub.

Here is async/await Promise version:

const loadVideo = file => new Promise((resolve, reject) => {
    try {
        let video = document.createElement('video')
        video.preload = 'metadata'

        video.onloadedmetadata = function () {
            resolve(this)
        }

        video.onerror = function () {
            reject("Invalid video. Please select a video file.")
        }

        video.src = window.URL.createObjectURL(file)
    } catch (e) {
        reject(e)
    }
})

Can be used as follows:

const video = await loadVideo(e.currentTarget.files[0])
console.log(video.duration)

Get video duration - JSFiddle, <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">. 3. </video>. 4. <div id="meta"></div>. JavaScript + No-Library (pure JS) Tidy. The duration property returns the length of the current audio/video, in seconds. If no audio/video is set, NaN (Not-a-Number) is returned. Note: This property is read-only.

Get HTML5 Video Duration, video elements have a duration property which represents the number of seconds in the video. To display the duration in a pretty fashion, you'll need to use parseInt and modulus ( % ): // Assume "video" is the video node var i = setInterval(function() { if(video. readyState > 0) { var minutes = parseInt(video. create this step – map the video folder create loop to files in folder load comObject to help us read the ‘Duration’ property from file. order result to object. Enjoy your movie! (Visited 3,517 times, 1 visits today)

HTML Audio/Video DOM duration Property, Example. Get the length of the current video: var vid = document.getElementById( "video1"); alert(vid.duration);. Try it Yourself �� Now, create an object of the VideoFileClip class by referencing the location of the video file as a parameter. video = moviepy.editor.VideoFileClip("D:\path\to\video.mp4") We can now access the duration member of the class which will contain the duration of the video file in seconds which can be formatted into our desired format.

Validation Check for Video Duration on Client side, I did lot of R & D to find a way of validating the video duration to be let say <div style="border:1px solid black">; <h3>File Upload</h3>; <input� In this article we will see how we can get the duration of the video file clip in MoviePy. MoviePy is a Python module for video editing, which can be used for basic operations on videos and GIF’s. Duration is basically length of the video i.e how long the video is, it is in seconds.

Comments
  • Are you looking for something like this? jsfiddle.net/derickbailey/s4P2v This isn't mine, and it's for audio, but I can't imagine it will be very different for video
  • @RobinHellemans This one creates a <video> element and thats exactly what I don't want. :(
  • Any idea how to get this work with avi files?
  • This one worked well, but when before I return the value it's ok then after I return It's undefined. Any idea of what could I do to solve this? i.e. 24.105 undefined
  • yep, store it in a global variable, or even better, store your files in an array, then in the event handler, add to your stored file a duration attribute
  • @davis, see edit, you can then remove the files you don't want with myVideos.splice(the_index_of_the_video)
  • Oh, that helped me a lot, Thank you! Also, why can't I send this info to outside of the function? Even using getters and setters I still having problem to do it.
  • It's because you are in the videos'sonmetadata scope, which works asynchronously. You'll have to store it in a global variable (like I did with myVideos = [];) and only call your setFileInfo() once this event has been triggered. or alternatively, you could use a setTimeout() loop to check if the property is set.