使用 Flexslider 播放 Youtube 视频答案

【问题标题】：Using Flexslider to play Youtube videos使用 Flexslider 播放 Youtube 视频
【发布时间】：2015-07-08 08:16:28
【问题描述】：

我正在尝试将播放 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>

【问题讨论】：

标签： jquery youtube flexslider

【解决方案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>

【讨论】：

本质上是把这两个 JS 文件连接起来，然后就成功了。