onYouTubeIframeAPIReady调用了一次，但一个页面上需要多个视频

Question

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

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

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

关于上述方法的文件如下：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

提前谢谢。

编辑：（Miha Lampret第一次回答后澄清）

我不能在onYouTubeIframeAPIReady（）方法中声明其他玩家，因为该代码是通过一个名为"小部件"的服务器端引入的。因此：

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

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

Answer 1

onYouTubeIframeAPIReady()在YouTube API准备好使用后执行，即在API的Javascript文件之后执行http://www.youtube.com/iframe_api已加载。

你可以在YouTubeIframeAPIReady（）上创建更多玩家

var ytplayer1 = undef;
var ytplayer2 = undef;
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'
    });
}

请注意，您需要在onYouTubeIframeAPIReady()之外声明ytplayer1和ytplayer2，以便以后可以使用它们：

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

Answer 2

我最终解决这个问题的方法是允许页面上包含的每个服务器端小部件将信息添加到全局javascript数组中。他们我使用onYouTubeIframeAPIReady（）函数在该数组上循环，依次生成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]);
    }
}

如何格式化这个数组是一个微不足道的问题。它是从服务器端include从javascript输出填充到文档中的。上面的这个功能和控制按钮等的所有其他通用实用程序功能只包含一次。只有视频参数/播放列表的定义是服务器侧循环的每次交互所包括的唯一比特。

Answer 3

我已经实现了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', { ... })
})