如何从HTML5多视频中获取持续时间?

时间:2015-04-02 09:16:16

标签: jquery html5 html5-video

我在单个屏幕上有多个视频标签,具有绝对位置,并且希望从多个视频端获得更长的视频,并且当更长的视频端想要执行代码时。

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

我如何获得持续时间?

1 个答案:

答案 0 :(得分:2)

您可能需要等待才能获得持续时间,直到视频的元数据已加载(否则,持续时间将报告&#39;未定义&#39;)。此外,您可能需要$(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);
    });
}