在页面上循环多个视频并访问其中的元素-Javascript

我有以下脚本，它返回给定页面上的所有

视频
元素：

var amountWatched = '';

var video = document.getElementsByTagName("video");

console.log(video); // Returns HTMLCollection

for(var i = 0; i < video.length; i++){

   console.log(video[i]);

   video[i].addEventListener('playing', function(){
   var mytimer = setInterval(function(){

   console.log(video[i]);

   console.log(video[i].children[0].outerHTML); // Currently undefined


    }, 300);
  })
}

var amountWatched=''；
var video=document.getElementsByTagName（“视频”）；
console.log（视频）；//返回HTMLCollection
对于（变量i=0；i

我们正在基本设置一个
播放
活动，允许我们访问观看的
百分比
等，而不是为多个视频设置多个脚本

现在，第一个
console.log
返回以下内容：


这就是我所期望的，然后我可以导航到每个条目并访问我所需要的给定变量

但是，当我们在
for
循环和I
console.log（video[I]）中时我看到以下内容：


现在的问题是，当我试图访问
子对象时，我得到错误
未定义
，我的问题是如何确保在
for
循环中循环
HTMLcollection
，该循环允许我访问
HTMLcollection
中的所有元素
 播放事件将在添加eventListener的循环之后发生。。。因此，
i
将等于数组的长度，因此您正在访问未定义的数组元素。。。最简单的修复方法是一个闭包，在这种情况下是一个生命

var amountWatched = '';

var video = document.getElementsByTagName("video");

console.log(video); // Returns HTMLCollection

for(var i = 0; i < video.length; i++){
    (function(vid) {
        console.log(vid);
        vid.addEventListener('playing', function(){
            var mytimer = setInterval(function(){
                console.log(vid);
                console.log(vid.children[0].outerHTML); // Currently undefined
            }, 300);
        });
    })(video[i]);
}

var amountWatched=''；
var video=document.getElementsByTagName（“视频”）；
console.log（视频）；//返回HTMLCollection
对于（变量i=0；i
播放事件将在添加eventListener的循环之后发生。。。因此，
i
将等于数组的长度，因此您正在访问未定义的数组元素。。。最简单的修复方法是一个闭包，在这种情况下是一个生命

var amountWatched = '';

var video = document.getElementsByTagName("video");

console.log(video); // Returns HTMLCollection

for(var i = 0; i < video.length; i++){
    (function(vid) {
        console.log(vid);
        vid.addEventListener('playing', function(){
            var mytimer = setInterval(function(){
                console.log(vid);
                console.log(vid.children[0].outerHTML); // Currently undefined
            }, 300);
        });
    })(video[i]);
}

var amountWatched=''；
var video=document.getElementsByTagName（“视频”）；
console.log（视频）；//返回HTMLCollection
对于（变量i=0；i
注意，
timeupdate
或
progress
事件可以替换
setInterval（）
在
播放
事件中调用。在调用
setInterval（）
的每次迭代中，您还将分配、覆盖相同的
timerID
变量
mytimer
。如何在iLife closure和事件处理程序之外访问
mytimer
？@Jaromanda X这只适用于一个视频，一旦一个视频完成，我单击另一个，控制台中没有任何错误？什么都没有？如果原始逻辑在某种程度上存在缺陷，我也无能为力——也许如果您创建一个最小的完整且可验证的示例，我可以提供更多帮助。注意，
timeupdate
或
progress
事件可以替换
setInterval（）
调用
播放
事件的内部。在调用
setInterval（）
的每次迭代中，您还将分配、覆盖相同的
timerID
变量
mytimer
。如何在iLife closure和事件处理程序之外访问
mytimer
？@Jaromanda X这只适用于一个视频，一旦一个视频完成，我单击另一个，控制台中没有任何错误？什么都没有？如果原始逻辑在某种程度上存在缺陷，我也无能为力——也许如果您创建一个最小的完整且可验证的示例，我可以提供更多帮助
setInterval（）
在
playing
事件处理程序中调用的目的是什么？在
playing
事件处理程序中调用的目的是什么？