获取视频时长的jQuery

Question

我有一个问题。我想得到一个源的持续时间。

我想做下一个。当页面加载时，我需要得到源的持续时间，但问题是，当我想得到的持续时间显然是不可见的，只有当我按下一个按钮，我可以得到的持续时间。我需要知道从开始的持续时间，因为我需要计算videoaudio的位置并通过currentTime发送。

我试着做 "alert"，但结果是 "NaN"。

这是我的代码。

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

就这些了 谢谢你。

Gustavo G.

Answer 1

你至少要等到元数据加载完毕才能得到视频的持续时间，幸运的是有一个事件可以实现。

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

Answer 2

您可以直接调用 onloadedmetadata 函数。只有当元数据（视频、图像等）完全加载到页面上时，它才会调用视频的持续时间，因此，防止代码 NAN 在输出中，示例。

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

在JavaScript中：

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

在Jquery中：

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