停止Vimeo嵌入Jquery Infinite Carousel中的上一个/下一个按钮

Question

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!

Answer 1

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.

Answer 2

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>

Answer 3

@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");