将Froogaloop事件附加到Flexslider当前幻灯片

我正在使用吴主题的Flexslider构建一个带有多个Vimeo视频的滑块。我可以使用他们的Froogaloop($f)库,让Flexslider根据vimeo事件播放和暂停,但我无法让Flexslide中的下一个/上一个事件暂停视频。

如果每个vimeo播放器都被硬编码为一个变量,它就可以工作,但我需要滑块来支持任何数量的视频。请参见此处的示例: http://demo.astronautweb.co/slider/flex/vimeo-multi.html

上的示例 Flexslider page 使用挂钩滑块事件 $f(player) 这是一个物体(我认为)。这只针对 最后的 当我在代码中使用它时,请滑动。W

当我尝试使用Flexslider自己的 幻灯片当前幻灯片 ,我只能针对一个元素,而不能针对一个对象。这就是我达到javascript知识上限的地方。

以下是代码:

$(window).load(function(){  

var vimeoPlayers = document.querySelectorAll('iframe'),
    player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
    player = vimeoPlayers[i];
    $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    (element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
}

function ready(player_id) {
    var froogaloop = $f(player_id);

    froogaloop.addEvent('play', function(data) {
        $('.flexslider').flexslider("pause");
    });

    froogaloop.addEvent('pause', function(data) {
        $('.flexslider').flexslider("play");
    });
}

var slider = $(".flexslider");

slider.flexslider({
    animation: "slide",
    animationLoop: true,
    slideshowSpeed: 5000,
    video: true, 
    start: function(slider){
        $('body').removeClass('loading');
    },
    before: function(slider){ 

        // this only pauses the last slide
        $f(player).api('pause');

        // this is the Flexslider API for targeting the current slide
        var currentSlide = slider.slides.eq(slider.currentSlide + 1),
            currentFrame = currentSlide.find('iframe');

        console.log(currentFrame);  
    }
});

});