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

【问题标题】：Attach Froogaloop event to Flexslider current slide将 Froogaloop 事件附加到 Flexslider 当前幻灯片
【发布时间】：2012-07-26 19:49:24
【问题描述】：

我正在使用 Woo Theme 的 Flexslider 构建一个包含多个 Vimeo 视频的滑块。我可以让 Flexslider 根据 vimeo 事件播放和暂停，使用他们的 Froogaloop ($f) 库，但是我无法让 Flexslider 中的下一个/上一个事件暂停视频。

如果每个 vimeo 播放器都被硬编码为变量，它就可以工作，但是我需要滑块能够支持任意数量的视频。在此处查看示例：http://demo.astronautweb.co/slider/flex/vimeo-multi.html

Flexslider page 上的示例将滑块事件与 $f(player) 挂钩，这是一个对象（我认为）。当我在我的代码中使用它时，这只针对 last 幻灯片。 W

当我尝试使用 Flexslider 自己的 slide.currentSlide 时，我只能定位一个元素，而不是一个对象。这是我达到我的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);  
    }
});

});

【问题讨论】：

标签： jquery api vimeo flexslider froogaloop

【解决方案1】：

从您在 astronautweb.co 上的示例看来，您使用的是旧版本的 Froogaloop API。获取最新的应该会让这更容易https://github.com/vimeo/player-api/tree/master/javascript

// Enable the API on each Vimeo video
    $('iframe.vimeo-player').each(function(){
  $f(this).addEvent('ready');
});

// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$(".flexslider")
    .fitVids()
  .flexslider({
    animation: "slide",
    slideshow: false,
    animationLoop: false,
    smoothHeight: true,
    start: function(slider) {
      $('body').removeClass('loading');
    },
    before: function(slider) {

      currentSlide = slider.currentSlide;
      player_id = currentSlide + 1
      currentVideo = 'player_' + player_id;

      $f(currentVideo).api('pause');

    }
});

这是另一个example of the Froogaloop API 2.0

【讨论】：