HTML5 视频标签重放事件

Question

我有 html 如下代码

<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>

我第一次创建视频标签并附加到主 div 但从下一次开始我只是使用 display show hide 播放视频但我想每次都获得视频的持续时间但下面的代码只调用一次.

this.addEventListener('loadeddata', function(e) {
        e.target.duration
   });

Answer 1

在纯 JavaScript 中并不容易，因为根据定义，.loadeddata 在用户代理中运行一次...

因为我看到你有“jQuery-标记”你的问题，我可能建议你使用这段代码

 var video = $('#videoID')[0];
  video.onloaddata = function(e) { /* your code here*/ };

瞧！

HTML5 视频标签重放事件

HTML5 video tag replay event

html

video

jquery