4

My setup: http://jsfiddle.net/ASa2K/1/

I have a Jquery Infinite Carousel which will have in it embedded Vimeo vids.

When 'Next' or 'Prev' is clicked, I would like it to stop all videos. Currently it keeps playing the videos while clicking through.

I've looked around but can't find much specific to my problem. I'm not so well-versed in js as you might have guessed!

xhadf
  • 57
  • 1
  • 7

3 Answers3

8

Hej so first of you can find the api here

http://vimeo.com/api/docs/player-js

since its an iframe there is no back compatible way of communicating with it but there is something called postMessage that new browsers has. so You can write this.

$("iframe").each(function() {
  this.contentWindow.postMessage('{ "method": "pause" }', "http://player.vimeo.com");
});

the different methods are documented on the page. but this pauses all players.

megakorre
  • 2,213
  • 16
  • 23
  • Thanks. I'm not 100% clear on how to link the above script with my prev/next buttons. – xhadf Oct 05 '11 at 21:31
  • Wait, I spoke too soon. I tried this with other Vimeo videos and suddenly it's not quite working properly. It's pausing the videos ok, but when the current video is focussed on, it's automatically resuming and playing. Your example kept the videos paused until play is clicked again, which is what I want. – xhadf Oct 05 '11 at 22:28
  • This leads me to think I've missed something. Was the only thing you altered in the js? – xhadf Oct 05 '11 at 22:29
  • notice that i have set the &api=1 tag to in my example .... my example is working as you want right – megakorre Oct 05 '11 at 22:30
  • Hi again, wondered if you could help me further. I want to use this exact functionality on a regular div in my markup. So when it is clicked, it stops all videos. I'm not 100% sure how to implement the above code to do this though. Thanks! – xhadf Oct 09 '11 at 18:57
  • Hi megakorne, i have another vimeo-related problem that I think you may be able to help me with. I'd be grateful if you could take a look at it: http://stackoverflow.com/questions/7812377/vimeo-problems-with-jquery-fancybox-infinite-carousel Thanks! – xhadf Oct 19 '11 at 20:46
4

Here's a sample that should let you call from a button click:

<script>
    function pauseAllVideos(){
        $("iframe").each(function() {
            this.contentWindow.postMessage('{ "method": "pause" }', "http://player.vimeo.com");
        });
    }
</script>

And this is the code from your html:

<a href="#" onClick="pauseAllVideos(); return false;">PAUSE VIDEOS</a>
Federico Cristina
  • 2,203
  • 1
  • 19
  • 37
Claude Shannon
  • 41
  • 1
1

@megakorre's solution worked for me. Simple and easy.

One caveat: If your domain is using https, it won't work unless you change http to https like this:

this.contentWindow.postMessage('{ "method": "pause" }', "https://player.vimeo.com");
Mark P
  • 407
  • 4
  • 4