javascript - 循环内的多个 YouTube 播放器实例

Question

我有以下代码，它有效 - 但我不知道的部分是如何在 onReady 事件中获取索引。结果是 2,2 而不是我期望的 0,1 - 为什么？

密码笔

var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = [];
var playerEl = document.querySelectorAll('.ytplayer');

 function onYouTubeIframeAPIReady() {
     for (var i = 0; i < playerEl.length; i++) {

         players[i] = new YT.Player(playerEl[i], {
             events: {
                 'onReady': () => { console.log('index: '+i) } // why doesn't this return 0,1 ??
             }
         });
     }
 }

<iframe class="video ytplayer" width="100%" height="390" type="text/html" src="https://www.youtube.com/embed/ScMzIvxBSi4?controls=0&t=31s&loop=1&playlist=ScMzIvxBSi4&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<iframe class="video ytplayer" width="100%" height="390" type="text/html" src="https://www.youtube.com/embed/iGpuQ0ioPrM?controls=0&t=31s&loop=1&playlist=iGpuQ0ioPrM&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Answer 1

我设法使用以下代码解决了它。我犯的错误是我试图在事件中存储一个变量。该事件是异步的，不知道它在循环中 - 至少我认为就是这样，如果我错了，请纠正我。

代码笔工作

 function onYouTubeIframeAPIReady() {
     document.querySelectorAll('.ytplayer').forEach((item) => {
         new YT.Player(item, {
             events: {
                 'onReady': (event) => {
                     event.target.playVideo();
                     event.target.mute();
                 }
             }
         })
     })
}