获取视频时长 jQuery

Question

我有一个问题。我正在尝试获取源的持续时间。

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

I try to do "alert" but the result is "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);
    });
});

就是这样。谢谢。

古斯塔沃·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>

获取视频时长 jQuery

Get Video Duration jQuery

javascript

php

time

jquery

duration