SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get video duration before upload

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code JavaScript:
    myVid=document.getElementById("video1");
    consol.log(myVid.duration);

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if only
    PHP Code:
    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); 




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

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just playing around ^^
    PHP Code:
     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. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I was thinking more along these lines.

    HTML Code:
    <!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. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    I was thinking more along these lines.

    HTML Code:
    <!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.
    I got that snippet from a demo for upload image for
    the image it works so I wondered why not for the videos
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •