Vimeo API: Play button and multiple videos

Question

I'm having some trouble. I just discovered that you can control vimeo with js, and now I'm trying to create a play button that will start playing a vimeo video.

The problem I'm having is that I have multiple videos on the same page. I took the example/playground file (from here http://player.vimeo.com/playground / https://github.com/vimeo/player-api/tree/master/javascript) and removed the functionality that I don't require, however, I can't understand how I connect the play button with a certain video.

This is what I have so far

HTML:

<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
     <span class="hide">Play 1</span>
</div>
<iframe id="player_2" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_2" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
    <span class="hide">Play 2</span>
</div>

JS:

            var vimeoPlayers = document.querySelectorAll('iframe'),
                player;

            for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
                player = vimeoPlayers[i];
                $f(player).addEvent('ready', ready);
            }


            function addEvent(element, eventName, callback) {
                if (element.addEventListener) {
                    element.addEventListener(eventName, callback, false);
                }
                else {
                    element.attachEvent(eventName, callback, false);
                }
            }


            function ready(player_id) {
                // Keep a reference to Froogaloop for this player
                var container = document.getElementById(player_id).parentNode.parentNode,
                    froogaloop = $f(player_id);

                function setupSimpleButtons() {
                    var buttons = container.querySelector('div.intro'),
                        playBtn = buttons.querySelector('.hide');

                    // Call play when play button clicked
                    addEvent(playBtn, 'click', function() {
                        froogaloop.api('play');
                    }, false);



                }

                setupSimpleButtons();
            }
        })();

If I have code that is unnecessary please help me remove it. Many thanks.

Leopd Leopd · Accepted Answer · 2011-05-30T09:43:55

Your ready() function is called once per vimeo player. You need to change which object is hooked up with the addEvent button. To do this you probably need to put id attributes on the buttons themselves.

Vimeo API: Play button and multiple videos

2 Answers