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>

函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer1'{
});
player2=新的YT.Player（'ytplayer3'{
});
player3=新的YT.Player（'ytplayer3'{
});
等等等等。
}
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
函数搜索（秒）{
如果（球员）{
秒+=秒；
player.seekTo（秒，真）；
}
}

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

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

#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>

#初始javascript+第一个视频
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer1'{
});
}
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
函数搜索（秒）{
如果（球员）{
秒+=秒；
player.seekTo（秒，真）；
}
}
var old_foo=onYouTubePlayerAPIReady；
60年代
120秒
#第二个视频加上与之配套的JS
60年代
120秒
函数onYouTubePlayerAPIReady（）{
老夫子（）；
player2=新的YT.Player（'ytplayer2'{
});
}

但每当我尝试添加另一个时，中间的那个就停止工作了。似乎我对onYouTubePlayerAPIReady函数的最后一次调用覆盖了它之前的所有内容，而没有在每一步执行该函数。我尝试过更新我的旧的_foo var、onYouTubePlayerAPIReady函数、定义一个新的var等等。这些似乎都不起作用！但我也很烂javascript，所以我肯定我只是错过了一些简单的东西

---

帮助？

加载播放器API代码后，会自动调用onyoutublayerapiready（）函数，因此只需定义一次。在这里面，你应该能够定义你的多个玩家。您的JS可以压缩为以下内容：

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

---

然后，您可以使用自己喜欢的方法将视频添加到阵列中（例如，

视频。按（'ytplayer3'）

），只要您在API添加到页面之前，或者至少在API准备就绪之前执行此操作。

以下是使用

seekTo

按钮动态添加yt播放器的方法

let players=[]；
const button=document.querySelector（“按钮”）；
常量newId=（（）=>{
const prefix=“player”；
设id=1；
return（）=>{
设newId=id；
id=id+1；
返回{
id:newId，
cssId:`${prefix}${newId}`
}
}
})()
const createButton=（文本，点击事件）=>{
常量元素=document.createElement（“按钮”）；
element.textContent=文本；
setAttribute（“类型”、“按钮”）；
元素。addEventListener（“单击”，clickEvent）；
返回元素；
}
常量seekPlayer=（id，值）=>{
常量player=players.find（pl=>pl.id==id）；
player.seekTo（值）；
}
常量createPlayer=（）=>{
const parent=document.body；
const container=document.createElement（“div”）；
const playerPlaceholder=document.createElement（“div”）；
const result=newId（）；
playerPlaceholder.setAttribute（“id”，result.cssId）；
const button1=createButton（'60s'，（）=>seekPlayer（result.id，60））；
const button2=createButton（'120s'，（）=>seekPlayer（result.id，120））；
容器。附属物（playerPlaceholder）；
容器。追加子对象（按钮1）；
容器。追加子对象（按钮2）；
父.子（容器）；
const player=新的YT.player（result.cssId{
高度：'100'，
宽度：“100”，
videoId:'M7lc1UVf VE'，
活动：{
“onReady”：（事件）=>{
玩家=[…玩家{
id:result.id，
玩家：event.target
}]
},
}
});
}
按钮。addEventListener（“单击”，（）=>{
createPlayer（）；
})

添加播放器

是的，我有那个角色。但是假设我想在不更新原始脚本的情况下添加另一个视频。我怎样才能在原始的基本脚本上附加一个额外的“player3=new YT.Player（'ytplayer3'），{}）；呢？我更新了答案和代码笔以显示一个更动态的解决方案。我正在django中使用forloop生成视频。这应该可以，谢谢！

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

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