Question

I’m trying to construct a table on the right of the page where I pull out all the videos from the server. I want the users to click a row in the table and it starts to play a video in flowplayer on the left of the page. The video url is something I pull out of the DB.

<?php

    for($i=0;$i<$num_videos;$i++)
    {
?>              
        <tr onclick="DoNav('<?php echo $result_videos[$i]["video_url"]; ?>');">
            <td>
...

Here’s the javascript:

function DoNav(theUrl)
{
  flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl);
}

For whatever reason I can’t seem to get flowplayer to work with this div:

<div id="player"><img src="recordings/landscape.jpg" width="320" height="240" /></div>

It will only prompt you to open or save the video instead of playing in the current window. If anyone knows this issue here that would be appreciated. At any rate, I know I can get flowplayer working with a href like so:

<a 
href="url" 
style="display:block;width:320px;height:240px;" 
id="player"><img src="recordings/landscape.jpg" width="320" height="240" />
</a>

But I don’t want to put the href in the table as I want that splash image included as well. Any ideas?

Answer 1

Edited to improve clarity.

When the function flowplayer(“player”, “flowplayer/flowplayer-3.2.7.swf”, document.location.href = theUrl); Was called the document.location.href was being evluated and caused the browser to go to the theUrl which prompted for file to be downloaded.

Furthermore we found there is some sort of issue updating a with the as a child DOM object. This was solved by moving the image to the background of the using the inline CSS.

JS Code:

function DoNav(theUrl)
{
  flowplayer("player", "flowplayer/flowplayer-3.2.7.swf",  theUrl);
}

HTML table:

<div id="player" style="display:block;width:320px;height:240px;background-image:url(recordings/landscape.jpg)"></div>

PHP stayed the same.