5

我正在使用服务器端方法来放入带有播放列表和功能按钮的 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() 只执行一次。我需要检查的是是否已经执行过一次。

4

3 回答 3

7

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

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

ytplayer1.pauseVideo();
ytplayer2.playVideo();
于 2013-07-24T19:58:37.397 回答
4

我最终解决这个问题的方法是允许页面上包含的每个服务器端小部件将信息添加到全局 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 输出填充到服务器端包含的文档。上面的这个函数和控制按钮等的所有其他通用实用程序函数只包含一次。只有视频参数/播放列表的定义是每个服务器端循环交互包含的唯一位。

于 2013-07-25T12:13:11.387 回答
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', { ... })
})
于 2019-09-18T15:37:29.630 回答