代码之家  ›  专栏  ›  技术社区  ›  Astrotim

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

  •  4
  • Astrotim  · 技术社区  · 12 年前

    我正在使用吴主题的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);  
        }
    });
    

    });

    1 回复  |  直到 12 年前
        1
  •  3
  •   mcsheffrey    12 年前

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