I have a question. I am trying to get the duration of a source.

I want to do the next: When the page load i need to get the duration of the source but the problem is that when i want to get the duration apparently is not visible, only i can get the duration when i press a button. I need to know the duration since the start because i need to calculate a position on video/audio and send through currentTime.

I try to do "alert" but the result is "NaN".

This is my code actually:

$( document ).ready(function() {
    var asset = $('#asset')[0]; // Obtiene el Objeto
    var tipo = $('#asset').attr('class'); // Video, Audio, PDF
    var duracion = asset.duration;
    var porcentaje = $('#porcentaje').attr('data-percent'); 
    var tiempo = (porcentaje*duracion)/100;
    asset.currentTime = tiempo;
    alert(duracion); // NaN

    $("#guardar").click(function() {
        var avance = asset.currentTime;
        if(tipo == 'video' || tipo == 'audio'){
            porcentaje = parseInt((avance*100)/duracion);
        }
        else if(tipo == 'pdf'){
            porcentaje = 100;
        }
        alert(porcentaje);
    });
});

That's all. Thank you.

Gustavo G.

I have a question. I am trying to get the duration of a source.

I want to do the next: When the page load i need to get the duration of the source but the problem is that when i want to get the duration apparently is not visible, only i can get the duration when i press a button. I need to know the duration since the start because i need to calculate a position on video/audio and send through currentTime.

I try to do "alert" but the result is "NaN".

This is my code actually:

$( document ).ready(function() {
    var asset = $('#asset')[0]; // Obtiene el Objeto
    var tipo = $('#asset').attr('class'); // Video, Audio, PDF
    var duracion = asset.duration;
    var porcentaje = $('#porcentaje').attr('data-percent'); 
    var tiempo = (porcentaje*duracion)/100;
    asset.currentTime = tiempo;
    alert(duracion); // NaN

    $("#guardar").click(function() {
        var avance = asset.currentTime;
        if(tipo == 'video' || tipo == 'audio'){
            porcentaje = parseInt((avance*100)/duracion);
        }
        else if(tipo == 'pdf'){
            porcentaje = 100;
        }
        alert(porcentaje);
    });
});

That's all. Thank you.

Gustavo G.

• javascript
• php
• jquery
• time
• duration

• avance and duracion are strings - you can't do mathematical functions with strings - you'll get a NaN value. – PDKnight Commented Jan 5, 2016 at 20:31

2 Answers 2

You'll have to wait at least until the metadata is loaded to get the videos duration, luckily there's an event for that

$( document ).ready(function() {
    var asset      = $('#asset')[0]; // Obtiene el Objeto
    var tipo       = $('#asset').attr('class'); // Video, Audio, PDF
    var duracion   = 0; 
    var tiempo     = 0;
    var porcentaje = $('#porcentaje').data('percent'); 

    asset.addEventListener('loadedmetadata', function() {
        duracion = asset.duration;
        tiempo   = (porcentaje*duracion)/100;

        asset.currentTime = tiempo;
    });

    $("#guardar").click(function() {
        var avance = asset.currentTime;
        if(tipo == 'video' || tipo == 'audio'){
            porcentaje = parseInt((avance*100)/duracion);
        } else if(tipo == 'pdf') {
            porcentaje = 100;
        }
    });
});

You can directly invoke onloadedmetadata function for the same. It will call the duration of the video only when the metadata (video, images, etc) will pletely loaded on the page and hence, prevent the code NAN in the output. Example:

<video controls onloadedmetadata="function_name()" id="videoid">
  <source src="video_name.mp4" type="video/mp4">
</video>

in JavaScript:

<script>
    function function_name() {
      var video_duration = document.getElementById('videoid').duration
      alert(video_duration); // or window.alert(video_duration); 
    }
</script>

In Jquery:

<script>
    function function_name() {
      var video_duration = $('#videoid').duration
      alert(video_duration); // or window.alert(video_duration); 
    }
</script>