2013-07-24 35 views
3

我正在使用服务器端方法在播放列表和运行按钮中放入YouTube视频(想想一个网页小部件可以在页面上随时调用,一次在页面上)。onYouTubeIframeAPIReady只呼叫过一次,但在一个页面上需要多个视频

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

我无法定义另一个onYouTubeIframeAPIReady()方法,因为它将覆盖第一个。如何将更多玩家添加到页面?这似乎很奇怪,有没有这个最初的方法已被触发后,创造出更多的视频的方式......上述方法

机制的文档是在这里:提前 https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

感谢。

编辑:(用于从米哈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()只执行一次。我需要检查的是,是否已经执行过一次。

回答

5

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

注意更多的球员,你需要声明ytplayer1ytplayer2onYouTubeIframeAPIReady()这样你就可以在以后使用它们:

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

我明白这一点。我在问题中添加了更多信息来解释为什么这不适合我的具体情况。什么是理想的方法来检查hasTheAPILoadedOnceAlready() – andyg1

3

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

+2

你也可以把'新的YT。Player()'放到'try {}'中,并添加'onYouTubeIframeAPIReady()'。如果'try'成功,则意味着API已经被加载,'onYouTubeIframeAPIReady()'将被忽略。如果'try'失败,则意味着API尚未加载,播放器将由'onYouTubeIframeAPIReady()'创建。看到这里的例子:[链接](http://jsfiddle.net/eePea/)。如果在API已经加载后加载其中一个小部件,这也将起作用。 –

相关问题