我正在使用Woo Theme的Flexslider构建一个包含多个Vimeo视频的滑块。我可以使用他们的Froogaloop($ f)库让Flexslider根据vimeo事件播放和暂停,但是我无法在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);
}
});
});
答案 0 :(得分:3)
从您在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');
}
});