Youtube api OnyOutubeiFrameApiredy只调用了一次，但页面上需要多个视频

我使用一种服务器端方法来插入带有播放列表和功能按钮的YouTube视频（想想一个网站小部件，它可以在页面上被调用，并且可能在页面上被调用不止一次）

我正在使用iframeapi。我可以通过在onyoutubeiframeapiredy（）方法中创建一个新的YT.Player实例来获得一个要渲染的视频。这对我来说很有意义——等待库加载。然而，当我想在一个页面上有多个视频播放器时，我不知道如何触发第二、第三、第四等视频播放器的启动

我无法定义另一个onyoutubeiframeapiredy（）方法，因为它将覆盖第一个方法。如何向页面添加更多玩家？奇怪的是，在这个初始方法启动后，没有办法创建更多的视频

关于上述方法的文件如下：

提前谢谢

编辑：（在Miha Lampret给出第一个答案后进行澄清）

我无法在onyoutubeiframeapiredy（）方法中声明其他播放器，因为此代码是通过一个名为“widget”的服务器端引入的。因此，不是：

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });

    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

我的代码相当于：

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });
}
function onYouTubeIframeAPIReady() {
    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

---

onyoutubeiframeapiredy（）只执行一次。我需要检查的是，是否已经执行过一次。

onYouTubeIframeAPIReady（）

是在YouTube API准备好使用之后执行的，也就是在加载API的Javascript文件之后

您可以在onyoutubeiframeapiredy（）中创建更多玩家

请注意，您需要在

onYouTubeIframeAPIReady（）

之外声明

ytplayer1

和

ytplayer2

，以便以后可以使用它们：

ytplayer1.pauseVideo();
ytplayer2.playVideo();

---

我最终解决这个问题的方法是允许页面上包含的每个服务器端小部件将信息添加到全局javascript数组中。我使用onyoutubeiframeapiredy（）函数循环该数组，依次生成YT播放器的实例

/* the Global array to hold all my stuff */
var new_player_attributes = new Array();
function onYouTubeIframeAPIReady() {
    for(key in new_player_attributes) {
        var player = new YT.Player(key, new_player_attributes[key]);
    }
}

---

如何格式化这个数组是一个无关紧要的问题。它从javascript输出填充到服务器端包含的文档中。上述功能以及控制按钮等的所有其他通用实用程序功能仅包含一次。只有视频参数/播放列表的定义是每次服务器端循环交互中包含的唯一位。

我已经实现了

用于向队列添加回调的enqueueOnYoutubeIframeAPIReady

函数，因此您可以添加任意数量的回调。如果API就绪，它将立即启动回调

(function () {
  var isReady = false
  var callbacks = []

  window.enqueueOnYoutubeIframeAPIReady = function (callback) {
    if (isReady) {
      callback()
    } else {
      callbacks.push(callback)
    }
  }

  window.onYouTubeIframeAPIReady = function () {
    isReady = true
    callbacks.forEach(function (callback) {
      callback()
    })
    callbacks.splice(0)
  }
})()

用法：

enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player1', { ... })
})

// Second player
enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player2', { ... })
})

---

我明白这一点。我在问题中添加了更多的信息来解释为什么这在我的特定情况下不起作用。理想的方法是检查hastheaporadedoncealready（）如何重构它以基于按钮单击动态调用？您还可以将

new YT.Player（）

放入

try{}

中，并添加

onYouTubeIframeAPIReady（）

。如果

try

成功，则表示API已加载，并且将忽略

onyoutubeiframeapiredy（）

。如果

try

失败，则表示API尚未加载，播放器将由

onYouTubeIframeAPIReady（）

创建。请参见此处的示例：。如果您的一个小部件在加载API之后加载，这也会起作用。

enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player1', { ... })
})

// Second player
enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player2', { ... })
})