javascript - 在JS中动态更新变量

我的页面上有多个视频，我正在尝试通过所有页面上的YouTube API进行搜索。这些视频是动态生成的，因此很遗憾，我无法一次对其进行预定义。如果可以的话，以下方法将起作用:

<script>
function onYouTubePlayerAPIReady() {
      player = new YT.Player('ytplayer1', {
      });
      player2 = new YT.Player('ytplayer3', {
      });
      player3 = new YT.Player('ytplayer3', {
      });
      etc. etc.
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function seek(sec){
    if(player){
        seconds += sec;
        player.seekTo(seconds, true);
    }
}

</script>

但是由于每个页面都有不同数量的动态生成的视频，所以我遇到了一个问题。

我可以使用以下代码来制作第一个和最后一个视频:

#Initial javascript + first video
<script>
function onYouTubePlayerAPIReady() {
      player = new YT.Player('ytplayer1', {
      });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function seek(sec){
    if(player){
        seconds += sec;
        player.seekTo(seconds, true);
    }
}
var old_foo = onYouTubePlayerAPIReady;
</script>

<iframe id="ytplayer1" width="789" height="444" src="https://www.youtube.com/embed/p4vLPmVAwlo?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<button type="button" onclick="player.seekTo(60)">60s</button>
<button type="button" onclick="player.seekTo(120)">120s</button>



#Second video plus the JS to go with it
<iframe id="ytplayer2" width="789" height="444" src="https://www.youtube.com/embed/_9ahu4c5zdI?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<button type="button" onclick="player2.seekTo(60)">60s</button>
<button type="button" onclick="player2.seekTo(120)">120s</button>


<script>
function onYouTubePlayerAPIReady() {
  old_foo();
  player2 = new YT.Player('ytplayer2', {
  });
}

</script>

但是，每当我尝试添加另一个时，中间的对象就会停止工作。似乎我对onYouTubePlayerAPIReady函数的最后一次调用是覆盖它之前的所有内容，而不在每个步骤中都执行该函数。我尝试更新old_foo var，onYouTubePlayerAPIReady函数，定义新的var等，但这些似乎都不起作用!但是我也很喜欢JavaScript，所以我确定我只是缺少一些简单的东西。

救命？

最佳答案

加载播放器API代码后，会自动调用onYouTubePlayerAPIReady()函数，因此您只需定义一次即可。在其中，您应该能够定义多个玩家。您的JS可以压缩为以下内容:

<script>
    function onYouTubePlayerAPIReady() {
      player = new YT.Player('ytplayer1', {
      });
      player2 = new YT.Player('ytplayer2', {
      });
    }
</script>

使用onYouTubeIframeAPIReady而不是onYouTubePlayerAPIReady的工作CodePen:https://codepen.io/edlucas/pen/wvKVVaP

另请参阅:https://developers.google.com/youtube/iframe_api_reference

编辑

如果您需要即时创建标记，并且仍想在API准备就绪时全部加载它们，则一种方法是将视频排队在调用onYouTubePlayerAPIReady时使用的数组中。

var videos = ['ytplayer1', 'ytplayer2'];
var players = [];

function onYouTubeIframeAPIReady() {
    videos.forEach((video, i) =>
        players[i] = new YT.Player(video, {
            events: {
                'onReady': onPlayerReady,
            }
        });
   };
}

然后，您可以使用自己喜欢的方法将视频添加到数组中(例如videos.push('ytplayer3'))，只要您在将API添加到页面之前(至少在准备就绪之前)进行操作即可。

关于javascript - 在JS中动态更新变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62119833/