How to get video's metadata (length) before uploading?

Question

First thing first, I am trying to extract the video duration from the file and then display it without having to actually upload the file.

When a user selected a video - the information will be displayed below it includes file name, file size, file type. However much to my terrible skills - I cannot get the duration to display. I tried some code snippets i found from other sites as well as here but none of them seems to work. Just trying to find a simple code that would do the task.

I tried onloadedmetadata but I don't think that would even work.

Please note: I'm still learning javascript.

I also tried some sites tutorial & some code snippet I found via stackoverflow

           function uploadFunction(){
                //Variables
                var cVideo = document.getElementById("fileUp");
                var txtInfo = "";

               //function 
                if ('files' in cVideo){
                    if(cVideo.files.length == 0){
                    txtInfo = "Please select a video";
                } else {
                    for (var v = 0; v < cVideo.files.length; v++){
                        txtInfo += "<br><strong>#" + (v+1) + " File Information:</strong> <br>";         
                        var infoFile = cVideo.files[v];
                        if('name' in infoFile){
                            txtInfo += "File name: " +infoFile.name +"<br>";
                        }
                        if('size' in infoFile){
                           txtInfo += "File size: " +infoFile.size +" Bytes <br>"; 
                        }
                        if('type' in infoFile){
                            txtInfo += "File Type: "+infoFile.type +" <br>";
                        }
                        if('duration' in infoFile){
                            txtInfo += "Duration : "+infoFile.duration +"<br>";
                        }

                    }
                }

                }
                document.getElementById("information").innerHTML = txtInfo ;
 }

HTML

           <input type="file" id="fileUp" name="fileUpload" multiple size="50" onchange="uploadFunction()">
           <p id="information"></p>

Can't get the duration to appear at all.

Answer 1

It's actually reasonably simple, but since this requires turning the file into a blob and then checking its duration with a video element, uploading a video longer than a couple of minutes will take a lot of processing and slow down your page immensly . I have added a filesize restriction (which is a reasonable start in my opinion). Here's a snippet (which will not work on Stack Overflow due to sandbox restrictions, but I did test it on a local server). I obviously also don't check MIME types or whether its a video at all, although loadedmetadata will not trigger if you upload anything that is not a video.

 const fileInput = document.querySelector( 'input[type=file]' ); const fileDuration = document.getElementById( 'file-duration' ) // Listen for any change to the value of the file input fileInput.addEventListener( 'change', event => { fileDuration.textContent = 'Fetching video duration...'; // When the file selected by the user changes: // - create a fresh <video> element that has not yet fired any events // - create a file reader to safely retrieve and manipulate the file const file = event.target.files[0]; const video = document.createElement( 'video' ); const reader = new FileReader(); // Cancel if the initial filesize just seems too large. // If the maximum allowed is 30 seconds, then a Gigabyte of file seems too much. if( file.size > 10000000 ){ fileDuration.textContent = `File is too large (${file.size}). Refused to read duration.`; return; } // Before setting any source to the <video> element, // add a listener for `loadedmetadata` - the event that fires // when metadata such as duration is available. // As well as an error event is case something goes wrong. video.addEventListener( 'loadedmetadata', event => { // When the metadata is loaded, duration can be read. fileDuration.textContent = `Video is ${video.duration} seconds long.`; }); video.addEventListener( 'error', event => { // If the file isn't a video or something went wrong, print out an error message. fileDuration.textContent = `Could not get duration of video, an error has occurred.`; }); // Before reading any file, attach an event listener for // when the file is fully read by the reader. // After that we can use this read result as a source for the <video> reader.addEventListener( 'loadend', function(){ // reader.result now contains a `blob:` url. This seems like a // nonsensical collection of characters, but the <video> element // should be able to play it. video.src = reader.result; // After we assigned it to the `src` of the <video>, it will be // act like any other video source, and will trigger the related // events such as `loadedmetadata`, `canplay`, etc... }); // Instruct the reader to read the file as a url. When its done // it will trigger the `loadend` event handler above. reader.readAsDataURL( file ); });

 <input type="file" /> <p id="file-duration">No video file</p>