Get video duration before upload

JavaScript
1

Hi,
you can read the file before upload
http://www.html5rocks.com/en/tutorials/file/dndfiles/
but there is a way to get a video duration ?

Bye

2

I don’t think you can do it using the FileReader API, but it should be possible using the HTML5 audio/video duration property.

e.g.

myVid=document.getElementById("video1");
consol.log(myVid.duration);
3

if only


var oFile = document.getElementById('files').files[0];
    document.getElementById('placeholder').innerHTML = '<video id="mytest" width="320" height="240" controls><source src="'+oFile.name+'" type="video/mp4"></video>';
   var myVid=document.getElementById("mytest");
console.log(myVid.duration);

:slight_smile:

you can do the preview of an image (base64) but for the video ?

4

just playing around ^^


 var oFile = document.getElementById('files').files[0];
    var mytest = document.getElementById('mytest');
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
        console.log(e.target.result);
        mytest.src = e.target.result;
        mytest.onload = function () { // binding onload event
            console.log('load');
        };
    };
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
    var myVid=document.getElementById("mytest");
    console.log(myVid.duration);
5

Hi there,

I was thinking more along these lines.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Get duration of video element</title>
  </head>

  <body>
    <input type="file" id="myUploader"/>

    <script>
      var uploader = document.getElementById("myUploader");

      uploader.onchange = function(){
        reader = new FileReader();
        reader.onload = function(e) {
          var videoElement = document.createElement('video');
          videoElement.src = e.target.result;
          var timer = setInterval(function () {
            if (videoElement.readyState === 4){
              console.log("The duration is: " + videoElement.duration.toFixed(2) + " seconds");
              clearInterval(timer);
            }
          }, 500)
        };		
        reader.readAsDataURL(files[0]);
      }
    </script>
  </body>
</html>

You have to upload the video first, before the script can ascertain its duration, but as I said previously, I don’t think it’s possible to do this before the upload has occured.

Out of interest - why do you need to get the duration in this way?

Hope that helps.

6

I got that snippet from a demo for upload image for
the image it works so I wondered why not for the videos :slight_smile:
but it doesn’t work …
I need a thing like this because I’m working
on a project of upload videos and a feature should be
upload only video which length is not more like 15m …
but I should find a other way (server side).

Thanks for the help :slight_smile: