onYouTubeIframeAPIReady 调用一次，但页面上需要多个视频 [英] onYouTubeIframeAPIReady called once but multiple videos needed on a page

问题描述

我正在使用服务器端方法插入带有播放列表和功能按钮的 YouTube 视频(想想一个网站小部件，它可以在页面上以任何方式调用，并且可能在页面上多次调用).

I am using a server-side method to drop in YouTube videos with playlists and functioning buttons (think of a website widget that can be called anyway on a page, and potentially more than once on the page).

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

I am using the IFrame API. I can get a single video to render by creating a new instance of YT.Player inside the onYouTubeIframeAPIReady() method. This makes sense to me - waiting for the library to be loaded. However when I want to have more than one video players on a page I don't know how to trigger the launch of the second, third, forth, etc.

我无法定义另一个 onYouTubeIframeAPIReady() 方法，因为它会覆盖第一个方法.如何向页面添加更多玩家?在这个初始方法触发后，没有办法创建更多视频似乎很奇怪......

I can't define another onYouTubeIframeAPIReady() method because it will overwrite the first. How is it possible to add more players to the page? It seems strange that there isn't a way to create more videos after this initial method has fired...

上述方法的文档在这里:https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Documention on the above method is here: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

提前致谢.

(在 Miha Lampret 的第一个回答之后进行澄清)

我无法在 onYouTubeIframeAPIReady() 方法中声明其他播放器，因为此代码是通过名为例如的服务器端引入的一个小部件".所以而不是:

I can't declare additional players inside the onYouTubeIframeAPIReady() method because this code is introduced via a server side called e.g. a "widget". So rather than:

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

The onYouTubeIframeAPIReady() is only executed once. What I need to check is the whether is has already been executed once.

推荐答案

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

onYouTubeIframeAPIReady() is executed after YouTube API is ready to be used, that is after API's Javascript file http://www.youtube.com/iframe_api is loaded.

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

You can create more players inside 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 以便稍后使用它们:

Note that you need to declare ytplayer1 and ytplayer2 outside of onYouTubeIframeAPIReady() so you can use them later:

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

这篇关于onYouTubeIframeAPIReady 调用一次，但页面上需要多个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！