PDA

View Full Version : Dynamically swapping Flash movies using Javascript/DHTML

jode
01-24-2007, 02:25 PM
Hi everyone, and thanks in advance.

I need to get onClick events on a list of links to load/swap a Flash movie on the page.

I.e. I have a list of Flash movies on one side of the page, and on the other side there is a default movie playing. When the user clicks on one of the links I want the flash movie they click on to 'swap' with the movie already there.

I have managed to get this to work in IE using a function to loadMovie and also another time with getElementById. Unfortunately I am having no luck in Firefox or Opera.

I cannot post any code as unfortunately I have made loads of alterations here and there and I have lost where I am, and what works and what doesn't.


There must be a very simple way of doing this?
Ancora
01-24-2007, 02:36 PM
jode:

The simplest way that I found is to swap the entire object string. Each string has a different src or file, or what ever it's called in Flash. I've done this with Flash, but can't find the code. Below, I use the same approach for embedded WMP. It works in IE and FF. Just do the same thing with your Flash "string."


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// create several embed strings, each with a different src
var mpEmbedStr1 = '<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="player1" autostart="1" showstatusbar="1" enablecontextmenu="false" width="320" height="309" transparentstart="1" loop="0" src="video.wmv" align="center"></embed>';
var mpEmbedStr2 = '<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="player1" autostart="1" showstatusbar="1" enablecontextmenu="false" width="320" height="309" transparentstart="1" loop="0" src="video.wmv" align="center"></embed>';

function swapMedia(nStr,n){

document.getElementById('bg_player'+n).style.display='none';
document.getElementById('mediaplayer'+n).style.display='';

// swap in/out the new embed string with the following line
document.getElementById('mediaplayer'+n).innerHTML = nStr;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}

</style>
</head>
<body>
<div id="bg_player1">
<img src="images.gif" alt="" name="tour_box__flash_11" width="320" height="305" id="image" onclick="loadplayer1();" onmouseover="this.style.cursor='pointer'"/>
</div>
<div id="mediaplayer1" style="display:none">
</div>

<div id="bg_player2">
<img src="images.gif" alt="" name="tour_box__flash_11" width="320" height="305" id="image" onclick="loadplayer1();" onmouseover="this.style.cursor='pointer'"/>
</div>
<div id="mediaplayer2" style="display:none">
</div>

<input type='button' value="Play 1" onclick="swapMedia(mpEmbedStr1,1)">
<br>
<input type='button' value="Play 2" onclick="swapMedia(mpEmbedStr2,2)">

</body>
</html>
jode
01-24-2007, 05:02 PM
Thanks Mike, I couldn't get your suggestion to work, but I managed to solve it anyway.

I now have an iframe with an ID and I am using Javascript functions (Swap, Swap2 etc) to getElementById and change the src of the iframe to whichever flash movie I want (flashmovie1.swf, flashmovie2.swf). This means I do not need an external html page for every movie to load into the iframe.

However, now I have tried it with youtube flv videos (the URL of the video)... Opera 9.10 hates this as pulling content from an external server into an iframe is treated as a security violation! It works, but the error console pops up every time.

Any advice?
Ancora
01-24-2007, 05:07 PM
jode:

No, sorry. I don't code for Opera. I take things as far as IE and FF.

But, the code I posted for swapping the complete string does work for Flash. I've used it, many times. I think that you must have been using a "string" with some hard breaks in it. You must use an unbroken string. No breaks.

I'll search for the Flash code again, and if I find it, I'll post it soon.

Using an iframe isn't needed, I know it isn't. And Opera sure can't complain about innerHTML

Let me take a look on an old archive disk and get back to you.
Ancora
01-24-2007, 05:21 PM
jode:

I found it. This code does work. Please test it, with an unbroken string.
The form isn't needed, don't remember why it's there. The file is more than 2 years old.


<HTML>
<Head>
<Script Language=JavaScript>

function showSWFPreview(currSWF){

var isSelection = currSWF;
var flashObjStr = "<object type=application/x-shockwave-flash width='100' height='100' loop=false><PARAM NAME=Movie value="+isSelection+"></object>"
document.getElementById('FlashDisplay').innerHTML = flashObjStr;
alert(document.getElementById('FlashDisplay').innerHTML);
}

</Script>
</Head>
<Body>
<Div id='FlashDisplay'></Div>
<br>
<form name="object_maintenance_form">
<input type="text" value="flash/flash1.swf" size="100" onclick="showSWFPreview(this.value)"><br>
<input type="text" value="flash/flash2.swf" size="100" onclick="showSWFPreview(this.value)">
</form>
</Body>
</HTML>