jquery infinite carousel auto-play needs to stop when press play on embedded video

Question

Example of the problem here: http://jsfiddle.net/EtWXX/

I have my infinite carousel set to auto play. It also has videos embedded. I need it to do two things however.

1. Stop if a video is played.
2. Stop if 'next' & 'prev' are interacted with.

Answer 1

You just need to call clearInterval(intervalId) when things are interacted with, then set it up again with intervalId = window.setInterval(slide, 5000); when you want it to start sliding again. if you wanted it to pause on hover you'd do something like:

$('#viewport').hover(
     function(){clearInterval(intervalId);},
     function(){intervalId = window.setInterval(slide,5000);}
);

I don't know what the code would be to detect a vimeo video playing or not, but it's trivial to turn the scrolling on/off this way.

EDIT

For vimeo you should check out their API you have to add ?api=1 to the end of your vimeo URL in the iframe and load their library called froogaloop that you can use to do this:

        jQuery('iframe.vimeo').each(function(){
            $f(this).addEvent('play', function(){clearInterval(intervalId);});
            $f(this).addEvent('stop', function(){intervalId = window.setInterval(slide,5000);});
        });

that should stop the slideshow when you play the video, and restart it when the video stops, it's listening for events from the API

as for the prev & next, just add the clear interval right after jQuery(next).click(function(event) { and jQuery(prev).click(function(event) { in the plugin's code, I don't know how you'd want to resume the slideshow though, but we already know the code for that...