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() 只执行一次。我需要检查的是是否已经执行过一次。

Answer 1

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

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

如何格式化这个数组是一件小事。它从 javascript 输出填充到服务器端包含的文档。上面的这个函数和控制按钮等的所有其他通用实用程序函数只包含一次。只有视频参数/播放列表的定义是服务器端循环每次交互包含的唯一位。

Answer 3

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

您可以在 onYouTubeIframeAPIReady() 内部创建更多播放器

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();