title: Pausing jQuery slider when Video is playing
body: <p>I'm using a jQuery slider on my site which allows for the embedding of Vimeo videos and I was wondering how I can make it so that if someone clicks "play" on the vimeo video, the slider will stop auto-rotating until the video is finished or until the user clicks "pause." I'm assuming I'm going to need to tap into the Vimeo API to accomplish this. Here is my slider code, any help is greatly appreciated!</p>
  
  <p><em>UPDATE</em> Solved this with the help of Trevor, here is the code for the slider:</p>
  
  <pre><code>var slideInProgress = 0;
  var currentSlideIndex = 0,
      slides;
  var playing = false;    
  function setTopSlider() {
      if (jQuery('#top_slider #container .slide').length != 0) {
          slides = jQuery('#top_slider #container &gt; .slide');
          for (var i = 0; i &lt;= slides.length; i++) {
              jQuery(slides[i]).css('left', '100%');
          }
          ;
          jQuery(slides[currentSlideIndex]).css('left', '0%');
          var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
          src = el.css("background-image").replace("_off", "_over");
          el.css("background-image", src);
          el.addClass('active');
      };
  };
  
  function slide(dir) {
      if (slideInProgress != 0) {
          return;
      }
      slideInProgress = 3;
      var current, next, nextSlide;
      var slideSpeed = 200;
      current = jQuery(slides[currentSlideIndex]);
      if (!isNaN(dir)) {
          next = dir;
          if (next &gt; currentSlideIndex)
              dir = 'left';
          else
              dir = 'right';
      };
      if (dir == 'left') {
          if (!next) {
              next = currentSlideIndex + 1;
              if (next &gt;= slides.length) {
                  next = 0;
              }
          }
          nextSlide = jQuery(slides[next]);
          nextSlide.css('left', '100%');
          nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
          //nextSlide.animate({left: '0%'}, 1500);
          nextSlide.animate({
              left: '0%'
          }, {
              duration: slideSpeed,
              complete: function() {
                  slideInProgress--;
              }
          });
          //current.animate({left: '-100%'}, 1500);
          current.animate({
              left: '-100%'
          }, {
              duration: slideSpeed,
              complete: function() {
                  slideInProgress--;
              }
          });
  
      } else {
          console.log('moving right');
          if (!next) {
              next = currentSlideIndex - 1;
              if (next &lt; 0) {
                  next = slides.length - 1;
              }
          }
          nextSlide = jQuery(slides[next]);
          nextSlide.css('left', '-100%');
          nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
          //nextSlide.animate({left: '0%'}, 1500);
          nextSlide.animate({
              left: '0%'
          }, {
              duration: slideSpeed,
              complete: function() {
                  slideInProgress--;
              }
          });
          //current.animate({left: '100%'}, 1500);
          current.animate({
              left: '100%'
          }, {
              duration: slideSpeed,
              complete: function() {
                  slideInProgress--;
              }
          });
  
      }
      current.addClass('active');
      nextSlide.removeClass('active');
      var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
      src = el.css("background-image").replace("_over", "_off");
      el.css("background-image", src);
      el.removeClass('active');
      el = jQuery('.dot:eq(' + next + ')');
      src = el.css("background-image").replace("_off", "_over");
      el.css("background-image", src);
      el.addClass('active');
      console.log('currentSlideIndex' + currentSlideIndex);
      console.log('next' + next);
      console.log('dir' + dir);
      currentSlideIndex = next;
      // **** //
      slideInProgress--;
      // **** //
  }
  setTopSlider();
  playing = setInterval(function() {slide('left')}, 6000);
  </code></pre>
  
  <p>And how I tied it into the Vimeo API:</p>
  
  <pre><code>(function () {
  
      var $=jQuery;
  
  
      var f = $('iframe');
      var url = f.attr('src').split('?')[0]; &lt;?php //HACK! had to hard code the protocol in here or postMethod shows error: Uncaught SyntaxError: An invalid or illegal string was specified. ?&gt;
      //var status = $('.status');
  
  
      // Listen for messages from the player
      if (window.addEventListener){
          window.addEventListener('message', onMessageReceived, false);
      } else {
          window.attachEvent('onmessage', onMessageReceived, false);
      }
  
      // Handle messages received from the player
      function onMessageReceived(e) {
          var data = JSON.parse(e.data);
  
  
          switch (data.event) {
              case 'ready':
                  onReady();
                  break;
  
              case 'playProgress':
                  onPlayProgress(data.data);
                  break;
  
              case 'pause':
                  onPause();
                  break;
  
              case 'finish':
                  onFinish();
                  break;
          }
      }
  
      // Call the API when a button is pressed
      $('button').on('click', function() {
          post($(this).text().toLowerCase());
      });
  
      // Helper function for sending a message to the player
      function post(action, value) {
          var data = { method: action };
  
          if (value) {
              data.value = value;
          }
          $('iframe')[0].contentWindow.postMessage(JSON.stringify(data), url);
      }
  
      function onReady() {
  
  
          post('addEventListener', 'pause');
          post('addEventListener', 'finish');
          post('addEventListener', 'playProgress');
      }
  
      function onPause() {
          console.log("vimeo paused");
      }
  
      function onFinish() {
          playing = setInterval(function() {slide('left')}, 6000);
          console.log("vimeo finish");
          slide('left');
      }
  
      function onPlayProgress(data) {
          clearInterval(playing);
          console.log("vimeo play progress");
      }
  })();
  </code></pre>