youtube-api - 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

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