Jquery 将事件侦听器添加到多个html5视频以更新不起作用的进度

我在一个视频页面上工作，在这个页面上，将使用PHP生成多个html5视频。每个都有一个唯一的ID，每个ID都有自己的进度条

我正在尝试使用JQueryeach方法添加一个eventListenerupdateProgress（）以在播放视频时更新播放进度条。我在页面上尝试了单个视频的代码，它可以工作，但是当我在页面上有多个视频时，它就不能工作了。希望你们能帮我。谢谢

$('video').each(function() {
    eid = this.id;
    this.addEventListener("timeUpdate"+eid, updateProgress(this, eid), false);
});

function updateProgress(vid, id) {
    var value = 0;
    if (vid.currentTime > 0) {
        value = (100 / vid.duration) * vid.currentTime;
    }

    $('#debug').html($('#debug').html()+'<br>'+'#vidProgress-'+id);
    $('#vidProgress-'+id).width(value + '%');
}

$（'video'）。每个（函数（）{
eid=this.id；
this.addEventListener（“timeUpdate”+eid，updateProgress（this，eid），false）；
});
函数更新进程（vid，id）{
var值=0；
如果（参见当前时间>0）{
值=（100/视频持续时间）*视频当前时间；
}
$（“#调试”）.html（$（“#调试”）.html（）+”
“+”#vidProgress-“+id）；
$（'#vidProgress-'+id）.width（值+'%'）；
}

以下是我的JSFIDLE链接：

---

您需要传递函数引用，因为事件处理程序还需要将

eid

声明为局部变量

$('video').each(function () {
    var eid = this.id;
    this.addEventListener("timeupdate", function () {
        updateProgress(this, eid)
    }, false);
});

function updateProgress(vid, id) {
    var value = 0;
    if (vid.currentTime > 0) {
        value = (100 / vid.duration) * vid.currentTime;
    }

    $('#debug').html($('#debug').html() + '<br>' + '#vidProgress-' + id);
    $('#vidProgress-' + id).width(value + '%');
}

$（'video'）。每个（函数（）{
var eid=this.id；
这个.addEventListener（“时间更新”，函数（）{
updateProgress（这个，eid）
}，假）；
});
函数更新进程（vid，id）{
var值=0；
如果（参见当前时间>0）{
值=（100/视频持续时间）*视频当前时间；
}
$（“#调试”）.html（$（“#调试”）.html（）+”
“+”#vidProgress-“+id）；
$（'#vidProgress-'+id）.width（值+'%'）；
}

---

但它可以简化为

$('video').on('timeupdate', updateProgress);

function updateProgress() {
    var value = 0,
        vid = this;
    if (vid.currentTime > 0) {
        value = (100 / vid.duration) * vid.currentTime;
    }

    $('#debug').html($('#debug').html() + '<br>' + '#vidProgress-' + vid.id);
    $('#vidProgress-'+this.id).width(value + '%');
}

$（'video'）。打开（'timeupdate'，updateProgress）；
函数updateProgress（）{
var值=0，
vid=这个；
如果（参见当前时间>0）{
值=（100/视频持续时间）*视频当前时间；
}
$（'#debug'）.html（$（'#debug'）.html（）+'
'+'#vidProgress-'+vid.id）；
$（'#vidProgress-'+this.id）.width（值+'%'）；
}