如何從HTML5獲得持續時間多個視頻？

Question

我在絕對位置的單個屏幕上有多個視頻標籤，並希望從多個視頻中獲得更長的視頻，以及當較長的視頻端想要執行代碼時。

<div id="#p0"> 
<div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;"> 
    <video preload="auto" autoplay> 
      <source src="1.mp4" type="video/mp4"> 
      <source src="1.ogv" type="video/ogg"> 
    </video> 
</div> 
<div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;"> 
    <video preload="auto" autoplay> 
      <source src="2.mp4" type="video/mp4"> 
      <source src="2.ogv" type="video/ogg"> 
    </video> 
</div> 
<div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;"> 
    <video preload="auto" autoplay> 
      <source src="3.mp4" type="video/mp4"> 
      <source src="3.ogv" type="video/ogg"> 
    </video> 
</div> 
</div> 

，我曾嘗試下面的代碼，但得到NaN當記錄保存時間

$('#p0 div video').each(function() {     
      console.log($(this)); 
      alert($(this).duration);console.log("dur "+$(this).duration); 
       if (longestVid == "" || longestVid.duration < $(this).duration) 
        longestVid = this; 
     }); 

我怎樣才能持續？

Answer 1

您可能需要等待持續時間，直到視頻的元數據已加載（否則持續時間將報告'未定義'）。此外，您可能需要請求$(this)[0].duration而不是$(this).duration。

$('#p0 div video').each(function() { 
    var $el = $(this); 
    console.log('pre-load, duration is', $el[0].duration); 
    $el.one('loadedmetadata play', function() { 
     console.log('loaded, duration is now', $el[0].duration); 
    }); 
}