Get Video Duration jQuery

Question

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.

`avance` and `duracion` are strings - you can't do mathematical functions with strings - you'll get a `NaN` value. — PDKnight, Jan 05 '16 at 20:31

score 1 · Accepted Answer · answered Jan 05 '16 at 20:35

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

Thank you. I had more than one hour trying. :) – ggonzalezj7 Jan 05 '16 at 21:52 — ggonzalezj7, Jan 05 '16 at 21:52

score 0 · Answer 2 · answered Jun 03 '20 at 20:36

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 completely 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>

Get Video Duration jQuery

2 Answers2

Linked