OK, after banging my head on this for a while, I decided to go with Javascript. This is what I did created another player but this time I removed the
vStream.seek(1);//this is how we generate our preview image without a jpg image
vStream.pause();
from it and I changed the name to
$movie->save("videostream2.swf");
You should have two players, mine are videostream3,one in which the video is paused, and videostream6 in which when the user clicks on a div area it will write using Javascript and the
innerHTML function the new player where our original player was.
Code:
function divClick(filename){
var div=document.getElementById("tv");
var sHTML="";
sHTML+='<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream6.swf?file=http://www.rantnow.net/videos/' + filename + '" width="280" height="280" id="go"></p>';
sHTML+='<param name="movie" value="http://www.rantnow.net/videostream6.swf?file=http://www.rantnow.net/videos/' + filename + '" />';
sHTML+='<param name="quality" value="high" /></object>';
//alert (sHTML);
div.innerHTML=sHTML;
}
That function does the job for what we need to do.
Now we set everything up using
HTML Code:
<div class="player">
<p id="getplayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<div id="tv">
<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv&xml=" width="280" height="280" id="go"></p>
<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" />
<param name="quality" value="high" />
</object>
</div>
<div id="preview">
<div class="smlflv" onClick="divClick('Bikinis-Workouts.flv');">
<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" id="go" width="100" height="100"></p>
<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" />
<param name="quality" value="high" />
</object>
<br>
<br>
bIKINI
</div>
<div class="smlflv" onClick="divClick('Simpsons-Opening-Medley.flv');">
<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" id="go" width="100" height="100"></p>
<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" />
<param name="quality" value="high" />
</object>
<br>
<br>
SIMPSONS
</div>
</div>
</div>
Then we use a little CSS to make everything look nice.
Code:
#preview{
position:absolute;
top: 0px;
left:300px;
}
.smlflv{
cursor:pointer;
}
We use the
cursor:pointer; to make the hand function appear. The nice thing about this is even if the have javascript turned off it will still run in the small player!
Here's a pic
Or you can see the
working one.