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

Question

我有以下脚本，其中 returns 给定页面上的所有 video 元素：

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

我们基本上是在设置一个 playing 事件，这将允许我们访问 percentage 观看过的内容等，而不是为多个视频设置多个脚本。

现在第一个console.logreturns我以下：

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

然而，当我们在 for 循环内并且我 console.log(video[i]); 我看到以下内容：

现在的问题是，当我尝试访问 children 时出现错误 undefined 我的问题是如何确保在 [=16] 中循环 HTMLcollection =] 循环让我可以访问 HTMLcollection 中的所有元素？

Answer 1

播放事件将在添加 eventListener 的循环之后发生...因此 i 将等于数组的长度，因此您正在访问未定义的数组元素...最简单的解决方法是一个闭包，在本例中是一个 IIFE

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

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

Looping multiple videos on page and access elements inside - Javascript

javascript

html5-video