FancyBox和Youtube API事件

一旦我正在播放到我的fancybox中的YouTubevideo结束，我正试图发起一个事件。

所以我可以在video结束后自动关闭fancybox。

我有最后一个fancybox版本，我在youtube API上，坚持示例，但似乎ytplayer对象是“未定义”，我无法使其正常工作。

我在互联网上阅读了很多东西，包括这个，这似乎很好： 当youtubevideoID完成时，如何让fancybox自动关闭？

这是我正在使用的代码： JsFiddle

$(".fancybox").fancybox({ 'openEffect' : 'none', 'closeEffect' : 'none', 'overlayOpacity' : 0.7, 'helpers' : { media : {} }, 'afterLoad' : function() { function onYouTubePlayerReady(playerId) { //alert(playerId); //alert(document.getElementById("myytplayer")); ytplayer = document.getElementById("myytplayer"); ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); } function onytplayerStateChange(newState) { //alert("Player's new state: " + newState); if (newState == 0){ $.fancybox.close(true); } } } }); // Launch fancyBox on first element $(".fancybox").eq(0).trigger('click'); 

如果有人得到这个工作，它会很棒！ 我只是video关闭fancybox一旦完成！

非常感谢

Answer 1

请参阅以下工作代码（您应该使用fancybox的第2版。）

jsfiddle ： http ： //jsfiddle.net/c5h9U/2/

 // Fires whenever a player has finished loading function onPlayerReady(event) { event.target.playVideo(); } // Fires when the player's state changes. function onPlayerStateChange(event) { // Go to the next video after the current one is finished playing if (event.data === 0) { $.fancybox.close(); } } // The API will call this function when the page has finished downloading the JavaScript for the player API function onYouTubePlayerAPIReady() { // Initialise the fancyBox after the DOM is loaded $(document).ready(function() { $(".fancybox") .attr('rel', 'gallery') .fancybox({ openEffect : 'none', closeEffect : 'none', nextEffect : 'none', prevEffect : 'none', padding : 0, margin : 50, beforeShow : function() { // Find the iframe ID var id = $.fancybox.inner.find('iframe').attr('id'); // Create video player object and add event listeners var player = new YT.Player(id, { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } }); // Launch fancyBox on first element $(".fancybox").eq(0).trigger('click'); }); } 

Answer 2

可能的原因：

• 测试“本地”（加载文件而不通过http：// localhost ）
• 使用iframe API混合Embed API（您声明iframe的地方）（您声明DIV并加载一些JS）。 事件似乎只适用于后者。
• DIV上的ID与新YT.Player（…）呼叫上的ID不匹配