FancyBox 和 Youtube API 事件 [英] FancyBox and Youtube API events

问题描述

我正在尝试在我的幻想箱中播放的 youtube 视频结束后触发一个事件.

I'm trying to fire an event once the youtube video that I'm playing into my fancybox is ended.

所以我可以在视频结束后自动关闭fancybox.

So I can close automatically the fancybox once the video is over.

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

I have the last fancybox version and I'm on the youtube API, sticking to exemples but it seems that ytplayer object is "undefined" and I can't make it work properly.

我在互联网上阅读了很多东西，包括这个，这似乎很好:当 youtube 视频 id 完成后如何让 fancybox 自动关闭?

I have read a lot of stuffs on internet including this one, which seems to be good: How make fancybox auto close when youtube video id done?

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

This is the code I'm using: 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');

如果有人能做到这一点，那就太棒了！我只是在完成后关闭fancybox的视频！

If someone get this working, it would be awesome ! I just the video to close the fancybox once it finished !

非常感谢

推荐答案

请看下面的工作代码(你应该使用fancybox的版本2.)

Please see following working code (you should use version 2 of fancybox.)

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

}

这篇关于FancyBox 和 Youtube API 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！