Vimeo embed (froogaloop) SQL "while loop" issue

Question

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>

score 0 · Accepted Answer · answered Apr 20 '13 at 17:21

0

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.

answered Apr 20 '13 at 17:21

bwoebi

23,637
5
58
79

yes nummy is unique. This sounds good. My issue is that I don't really understand which functions are up for renaming and which are part of the vimeo api. -- or its absoulutely possible that what I dont understand is something much more fundamental about javascript - But that makes a lot of sense. You say it's not an idea solution. Do you have any way to describe what an ideal solution might look like? – Apr 20 '13 at 17:27
@WillDelphia the ideal solution would be to define the `ready` function only once and have a global JS variable `nummy` (parameters don't seem to work here). And then in your window.addEventlistener prepend an event which sets your `nummy` variable`. (Maybe there's a better solution, but this is far better as the solution of now.) (and accept the answer if it was helpful...?) – bwoebi Apr 20 '13 at 17:37

Vimeo embed (froogaloop) SQL "while loop" issue

1 Answers1