CODEWITHSUNDEEP
javascriptphpjquerytimeduration
ggonzalezj7
ggonzalezj7

Reputation: 23

Get Video Duration jQuery

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.

Upvotes: 2

Views: 14115

Answers (2)

kartik tyagi
kartik tyagi

Reputation: 7190

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>

Upvotes: 1

adeneo
adeneo

Reputation: 318342

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

Upvotes: 2

Related Questions