Question

我正在尝试将Youtube视频整合到Flexslider中。它有Vimeo集成（有效）但Youtube根本没有播放。我该如何整合它？

// Can also be used with $(document).ready()
$(window).load(function() {

  // 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-project').flexslider("pause");
    });
    froogaloop.addEvent('pause', function(data) {
      $('.flexslider-project').flexslider("play");
    });
  }


  // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
  $(".flexslider-project")
    .fitVids()
    .flexslider({
      animation: "slide",
      controlNav: false,
      directionNav: true,
      slideshow: true,
      useCSS: true,
      prevText: '',
      nextText: '',       
      video: true,
      animationLoop: true,
      smoothHeight: false,
      before: function(slider){
        $f(player).api('pause');
      }
  });
});

这是它的输出方式：

<iframe id="player_1" src="<?php echo the_sub_field('video'); ?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Answer 1

试试这个：froogaloop.js和jquery.fitvid.js可以下载Flexslider

<body class="loading">

  <div id="container" class="cf">    
    <div id="main" role="main">
      <section class="slider">
        <div class="flexslider">
         <ul class="slides">
            <li>
              <iframe id="player_1" src="http://www.youtube.com/embed/gDsj5UZ_1bA?rel=0&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </li>               
          </ul>
        </div>
      </section>      
    </div>
  </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>

  <script type="text/javascript">    
    $(window).load(function(){

      // Vimeo API nonsense
      var player = document.getElementById('player_1');
      $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");
        });
      }


      // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
      $(".flexslider")
        .fitVids()
        .flexslider({
          animation: "slide",
          useCSS: false,
          animationLoop: false,
          smoothHeight: true,
          start: function(slider){
            $('body').removeClass('loading');
          },
          before: function(slider){
            $f(player).api('pause');
          }
      });
    });
  </script>
  <!-- Optional FlexSlider Additions -->
    <script src="js/froogaloop.js"></script>
    <script src="js/jquery.fitvid.js"></script>

</body>

使用Flexslider播放Youtube视频

1 个答案: