將Froogaloop事件附加到Flexslider當前幻燈片

我正在使用Woo Theme的Flexslider構建包含多個Vimeo視頻的滑塊。我可以使用他們的Froogaloop（$ f）庫讓Flexslider基於vimeo事件播放和暫停，但是我無法獲得Flexslider中的下一個/上一個事件來暫停視頻。將Froogaloop事件附加到Flexslider當前幻燈片

它可以工作，如果每個vimeo播放器硬編碼爲變量，但我需要滑塊能夠支持任意數量的視頻。在這裏看到一個例子：http://demo.astronautweb.co/slider/flex/vimeo-multi.html

Flexslider page上的例子掛鉤滑塊事件與$f(player)這是一個對象（我認爲）。當我在我的代碼中使用它時，這隻會鎖定最後的幻燈片。 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); 
    } 
});

}）;

來源

2012-07-28 Astrotim

從您在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

來源

2012-08-20 03:40:12 mcsheffrey

將Froogaloop事件附加到Flexslider當前幻燈片

回答

相關問題