Pausing jQuery slider when Video is playing-Collection of common programming errors

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!

var slideInProgress = 0;
var currentSlideIndex = 0,
    slides;
function setTopSlider() {
    if (jQuery('#top_slider #container .slide').length != 0) {
        slides = jQuery('#top_slider #container > .slide');
        for (var i = 0; i  currentSlideIndex)
            dir = 'left';
        else
            dir = 'right';
    };
    if (dir == 'left') {
        if (!next) {
            next = currentSlideIndex + 1;
            if (next >= 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 < 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();
setInterval(function() {slide('left')}, 6000);

I did find some code that makes it so that the slider automatically goes to the next slide after the video is done playing, maybe I can tie into this somehow:

var f = $('iframe');
var url = f.attribute('src').split('?')[0]; //HACK! had to hard code the protocol in here or postMethod shows error: Uncaught SyntaxError: An invalid or illegal string was specified.
//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() {
    console.log("vimeo finish");
    slide('left');
}

function onPlayProgress(data) {
    console.log("vimeo play progress");
}
})();

1. How about creating a boolean variable playing and using it to keep track of when the video is playing or not. If the video is playing then don’t run your slide function.

   e.g.

   var playing = false;
   
   function slide(dir) {
      if(playing)
           return false;
      ...
   }
   
   function onPause() {
       playing = false;
       console.log("vimeo paused");
   }
   
   function onFinish() {
       playing = false;
       console.log("vimeo finish");
       slide('left');
   }
   
   function onPlayProgress(data) {
       playing = true;
       console.log("vimeo play progress");
   }
   

Originally posted 2013-11-15 09:09:44.