Vimeo embed (froogaloop) SQL "while loop" issue

Link:

this is the page I am working on

So, I am trying to create a page that will produce a playlist of vimeo videos that will play one after another. Eventually I will have them hide and show using jquery or something so that only one embedded video iframe will appear at a time. In the meantime I am simply trying to get the vimeo api to give me control over each individual object.

So the desired result for now would be have each set up buttons control each video with its same $nummy value

where $nummy is the order in the list

The issue is that at the moment ONLY THE LAST video in the list responds to its own button-set's commands.

Here's the code WITH PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test The Loop2</title>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>

<body>


<?

//db connect

$con = mysql_connect("d######t","db######104","no#######s");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

//db select

mysql_select_db("db337100104", $con); 



$result = mysql_query("SELECT * FROM vim_playlist1");

while($row = mysql_fetch_array($result))
  {

        $nummy = $row['listnum'] ;
        $url = $row['url'] ;
        $nexty = $nummy+1 ; 


//not an area of php    

?>

 <iframe class="vimeo" id="play<? echo $nummy ?>" src="http://player.vimeo.com/video/<? echo $row['url'] ?>?api=1&player_id=play<? echo $nummy?>" width="500" height="281" frameborder="0"></iframe>
<br />
<button id="playButton<? echo $nummy ?>">Play</button>
<button id="pauseButton<? echo $nummy ?>">Pause</button>
<button id="unloadButton<? echo $nummy ?>">Unload</button>

<script>

 function ready(player_id)
        {


             $f('play<? echo $nummy?>').addEvent('ready', function() 
                        {
             $f('play<? echo $nummy?>').addEvent('finish', onFinish);
                        });



            function onFinish(play<? echo $nummy?>)  
                 {                
            $f('play<? echo $nexty ?>').api('play');
                 }





           document.getElementById('playButton<? echo $nummy ?>').addEventListener('click', function() {
                $f('play<? echo $nummy?>').api('play');
            });

            document.getElementById('pauseButton<? echo $nummy ?>').addEventListener('click', function() {
                $f('play<? echo $nummy?>').api('pause');
            });

           document.getElementById('unloadButton<? echo $nummy ?>').addEventListener('click', function()                                                    {
              $f('play<? echo $nummy?>').api('unload');
            });



             }


        window.addEventListener('load', function() {
            //Attach the ready event to the iframe
            $f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready);
        });



    </script>

<hr />

<?


        //end of loop
  }

  ?>

</body>
</html>

Solution

You are overwriting your ready function in every iteration of your loop. So only the last ready function will be executed.

An example solution would be to replace ready with ready<?php echo $nummy ?> (I suppose that $nummy is unique):

function ready<?php echo $nummy ?>(player_id) {
    // your function body
}

window.addEventListener('load', function() {
    //Attach the ready event to the iframe
    $f(document.getElementById('play<? echo $nummy?>')).addEvent('ready', ready<?php echo $nummy ?>);
});

P.s.: It is not an ideal solution. But a possible solution.