Reload SWFObject with a different flv file

Recently, I had to create a simple web page to display a bunch of video files (.flv) files. I wanted to change the video based on the text the user click without having to reload the entire page. It proved a bit tricker than what I originally thought.

I was using the flash player from bitgravity to create the code snippet that loads the flash object. It works well for the first flash movie. However, when the second movie is loaded, the javascript goes outof wack because the first call to SWFObject.embedSWF(...) changes the div tag.

I tried to use the SWFObject.removeSWF function but realized that not all versions support it. So, I came up with a simple but rude solution, that seem to be working fine for me.

The gist of it is, to embed the

tag that is passed as a parameter to the SWFObject.embedSWF call within another div tag. Then before I call the SWFObject.embedSWF method, I replace the innerHTML of the parent tag with a well known value, so every time the SWFObject.embedSWF() method will find the

element in the same manner it found the first time.


Here is a sample code for this. Create these following javascript functions.

<script type="text/javascript" src="http://bitcast-a.bitgravity.com/player/swfobject.js"≶</script≶
<script type="text/javascript" src="http://bitcast-a.bitgravity.com/player/playerversion.js"≶</script≶
<script type="text/javascript"≶

function replaceSwfWithEmptyDiv(targetID){

   var el = document.getElementById(targetID);
   if(el){
   el.innerHTML='<div id="bg_player_location"≶';
   }

}

function showMovie(url, divObj) {
selectDiv(divObj);
replaceSwfWithEmptyDiv("bg_videoBox");
var flashvars = {};
flashvars.File =url;
flashvars.Mode = "ondemand";
flashvars.ScrubMode = "advanced";
flashvars.StreamGuard = "false";
flashvars.AutoPlay = "true";
flashvars.DefaultRatio = "1.777778";
flashvars.ForceRatio = "false";
flashvars.VideoFit = "automatic";
flashvars.BufferTime = "1.5";
flashvars.AutoBitrate = "disabled";
flashvars.Thumbnail = "";
flashvars.PreRoll = "";
flashvars.LogoPNG = "onepix.png";
var params = {};
params.base = "http://bitcast-a.bitgravity.com/player/";
params.allowFullScreen = "true";
params.salign = "lt";
params.scale = "noscale"
params.wmode = "transparent";
var attributes = {};
attributes.id = "bitgravity_player_5";
swfobject.embedSWF(lateststable, "bg_player_location", "368", "207", "9.0.0", "http://bitcast-a.bitgravity.com/player/expressInstall.swf", flashvars, params, attributes);
}


</script≶

And now you would add the following code snippet to where the flash video will be displayed.

<div id="bg_videoBox"> <div id="bg_player_location"> </div> </div>

Now the final step. Add a snipper similar to the one below to load the video.

<div onclick="javascript:showMovie('http://link.to your.file.flv');" > Reality TV show </div>

Hope this helps.