Question

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

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

我尝试做“警告”，但结果是“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>

获取视频持续时间jQuery

2 个答案: