load different FLV video in modal window

Hi,

Im using JW Player 5 to play about 10 FLA videos loading them into a modal window using swfobject. The modal window is from "lightbox_me".

This is probably easier than I think but I am stuck. I can get the modal to work and load the first video, but not the second or third, it always loads the first video.

The CSS

 #showVid1, #showVid2 {background:#eef2f7;border:1px solid #536376;-webkit-box-shadow:rgba(0,0,0,.6) 0px 2px 12px;-moz-box-shadow:rgba(0,0,0,.6) 0px 2px 12px;padding:0;width:500px;height:485px;position:relative;display:none;}

  a#close_x {color:#536376;display:block;position:absolute;top:10px;right:10px;text-decoration:none;font:normal 11px Arial, Verdana, sans-serif;}
  a#close_x:hover {color:#000;text-decoration:none;}

This is the code for each button, but there must be a way so I dont have to write a click function for each link.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="jquery.lightbox_me.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;

<script type="text/javascript" charset="utf-8">
$(function() {
//button 1
$('.vid1').click(function() {
$('#showVid1').lightbox_me({
centered: true,
appearEffect: "fadeIn",
disappearEffect: "fadeIn",
zIndex: 999
});
return false;
});

//button 2
$('.vid2').click(function() {
$('#showVid1').lightbox_me({
centered: true,
appearEffect: "fadeIn",
disappearEffect: "fadeIn",
zIndex: 999
});
return false;
});

});
</script>

This is the js for the embed and video loading

<script type="text/javascript">

var player = null;
function playerReady(thePlayer) {
player = window.document[thePlayer.id];
}
function createPlayer() {
var flashvars = {
    file:"http://14iacc.org/wp-content/uploads/video/paradox.flv", 
    autostart:"true"
}

var params = {
    allowfullscreen:"true", 
    allowscriptaccess:"always"
}

var attributes = {
    id:"player1",  
    name:"player1"
}
swfobject.embedSWF("player.swf", "placeholder1", "320", "196", "9.0.115", false, 
  flashvars, params, attributes);
}
</script>

And the HTML

<body onload="createPlayer()">

<a class="vid1" href="#" onclick="player.sendEvent('STOP');
player.sendEvent('LOAD', 
'movie2.flv');">
inload video 1</a>
<br />

<a class="vid1" href="#" onclick="player.sendEvent('STOP');
player.sendEvent('LOAD', 
'movie1.flv');">
load video 2</a>
<br />

<div id="showVid1">
<a id="close_x" class="close" href="#">CLOSE</a>

<div id="placeholder1">
<a href="http://www.adobe.com/go/getflashplayer"&gt;Get flash</a> to see this player    
</div>
</div>

If I remove the "placeholder" from the modal the videos each load. But when in the modal the first video always loads.

Anyone have a solution for this?

Thanks

ansaurus

tags:

views:

answers:

load different FLV video in modal window

related questions