Attach a Froogaloop event to the current Flexslider slide

Question

I am creating a slider with several Vimeo videos using Woo Theme Flexslider. I can get Flexslider to play and pause based on vimeo events using their Froogaloop library ($ f), however I cannot get the next / previous events in Flexslider to pause the video.

It works if every vimeo player is hard coded as a variable, however I need a slider that can support any number of videos. Example here: http://demo.astronautweb.co/slider/flex/vimeo-multi.html

The example on the Flexslider page intercepts a slider event with $f(player) , which is an object (I think). This only applies to the last slide when I use it in my code. Tue

When I try to use my own Flexslider slide.currentSlide , I can only use an object, not an object. This is where I reached the upper limits of javascript knowledge.

Here is the code:

 $(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); } }); 

});

Answer 1

From your example on astronautweb.co it looks like you are using an older version of the Froogaloop API. Capturing the latter should make it a lot easier 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'); } }); 

Here is another example of the Froogaloop 2.0 API