0

我正在使用 Flexslider 一起显示图像和视频，但我试图弄清楚如何拥有它，以便如果视频不存在仅显示图像，反之亦然。目前，如果两者都存在：图像和视频它可以工作，但是一旦您删除视频，滑块就会停止加载。

他们演示的基本代码：

    // Vimeo API nonsense
    var player = document.getElementById('player_1');
    $f(player).addEvent('ready', ready);

    function addEvent(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false)
        } else {
            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");
        });
    }
    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.

$(".flexslider")
    .fitVids()
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

和

<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>
4

1 回答 1

0

我意识到以下几点：

before: function(slider){
        $f(player).api('pause');
      }

当没有视频存在时引起冲突，所以我创建了两个播放器，一个可以接受视频和图像（这是原始代码），另一个播放器只用于图像。使用：

$(".flexslider-img").flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true
  });

然后，当我使用 wordpress 时，我使用帖子格式来输出相关代码。例如，如果帖子包含视频，则用户将选择“视频”作为帖子格式，相关代码使用：

// Vimeo API nonsense
    var player = document.getElementById('player_1');
    $f(player).addEvent('ready', ready);

    function addEvent(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false)
        } else {
            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");
        });
    }
    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.

$(".flexslider-video")
    .fitVids()
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

毫无疑问，有更好的方法可以做到这一点，但它对我有用。

于 2013-11-18T14:17:10.240 回答