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

在准备好使用YouTube API之后执行

onYouTubeIframeAPIReady()，即在加载API的Javascript文件http://www.youtube.com/iframe_api之后。

您可以在YouYouTubeIframeAPIReady（）

中创建更多玩家

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

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

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

如何格式化这个数组是一个微不足道的观点。它从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', { ... })
})

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

3 个答案: