Javascript and flash

th1982

Now I have 3 flash movies.I want to create a dropdown menu to select what movie i want to play.And the movie will be played below of menu.any solution for it
thanks

Feb 28 '08 #1

Subscribe Post Reply

1647

gits

5,390

Expert Mod 4TB

hi ...

please show the code you already have ...

kind regards

Feb 28 '08 #2

th1982

Here is the Code:

[HTML]<style type="text/css">

</style>

</SCRIPT>
<table border="0" cellspacing="2">
<tr><br /><br /><br /><br /><br /><br /></tr> <tr>
<td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">
<tr>
<td><img src="img/latest news.jpg" alt="ee" width="41" height="34" /></td>
<td style="padding-left:15px;"><p align="left"><span class="style20"><strong>Lastest News</strong> |
Download here</span> </p></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">
<tr>
<td width="41"><a href="index.php?l1=161&l2=171"><img src="img/careers.jpg" alt="ee" width="41" height="34" border="0" /></a></td>
<td style="padding-left:15px;"><a href="index.php?l1=161&l2=171" class="tablink"><b>Career</b> | Apply now!</a></td>
</tr>
</table></td>
</tr>
<tr>
<td ><table width="100%" border="0" cellpadding="3">
<tr>
<td>Video</td>
<td><select name="select" id=numpage onChange="change()">

<option value="0">VFM - ad</option>
<option value="1">VFM - Introduction</option>
<option value="2">VFM - VietNam: The potential market</option>
</select>
</td>
</tr>
</table>
<param name="quality" value="high" />
<embed src="flash/video0.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="250"></embed>
</tr>
</table>[/HTML]

Thanks

Feb 29 '08 #3

gits

5,390

Expert Mod 4TB

hi ...

first give your embed-node an id:

Expand|Select|Wrap|Line Numbers

id="video_container"

second chnage the change-function to this:

Expand|Select|Wrap|Line Numbers

 funtion change(node) {

    var video = document.getElementById('video_container');

    video[i].src = "flash/video" + node.value + ".swf";

}

last - call the function like this:

[HTML]<select name="select" id="numpage" onchange="change(this);">[/HTML]
kind regards

Feb 29 '08 #4

th1982

am i correct with this?Thanks yo yr help

Expand|Select|Wrap|Line Numbers

 
<style type="text/css">

<!--

.style20 {font-size: 9px}

-->

</style>

<!--

<SCRIPT LANGUAGE="JavaScript"

TYPE="text/javascript">

funtion change(node) {

    var video = document.getElementById('video_container');

    video[i].src = "flash/video" + node.value + ".swf";

}
 
//-->

</SCRIPT> 

<table border="0" cellspacing="2">

   <tr><br /><br /><br /><br /><br /><br /></tr> <tr>

    <td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">

        <tr>

          <td><img src="img/latest news.jpg" alt="ee" width="41" height="34" /></td>

          <td style="padding-left:15px;"><p align="left"><span class="style20"><strong>Lastest News</strong> |

            Download here</span> </p></td>

        </tr>

    </table></td>

  </tr>

  <tr>

    <td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">

        <tr>

          <td width="41"><a href="index.php?l1=161&l2=171"><img src="img/careers.jpg" alt="ee" width="41" height="34" border="0" /></a></td>

          <td style="padding-left:15px;"><a href="index.php?l1=161&l2=171" class="tablink"><b>Career</b> |  Apply now!</a></td>

        </tr>

    </table></td>

  </tr>

  <tr>

    <td ><table width="100%" border="0" cellpadding="3">

      <tr>

          <td>Video</td>

          <td><select name="select" id=numpage onChange="change(this)">
 
              <option value="0">VFM - ad</option>

                <option value="1">VFM - Introduction</option>

                <option value="2">VFM - VietNam: The potential market</option>

          </select>

            </td>

      </tr>

      </table>

    <param name="quality" value="high" />

    <embed id="video_container"

 src="flash/video0.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="250"></embed>

    </tr>

</table>

Mar 1 '08 #5

th1982

Like the code above ,it dosen't work
another way to do it.thanks for supporting.

Mar 3 '08 #6

gits

5,390

Expert Mod 4TB

do you get any errors? btw. please set the id-name of your select-node in quotes like all attributes of a node has to be in quotes ... (onclick, id, readonly etc.)

kind regards

Mar 3 '08 #7

th1982

You can take a look to this link :
http://www.purpleasia.com/clients/VF...dex.php?l1=161
it's not effected.
thanks

Mar 3 '08 #8

gits

5,390

Expert Mod 4TB

ahhhrg :) ... sorry ... my bad i gave you the following line:

Expand|Select|Wrap|Line Numbers

video[i].src = "flash/video" + node.value + ".swf";

just use:

Expand|Select|Wrap|Line Numbers

video.src = "flash/video" + node.value + ".swf";

kind regards

Mar 3 '08 #9

th1982

Still not working.Even I changed to this :
[html]

<style type="text/css">

.style20 {font-size: 9px}

</style>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function change(node) {

var video = document.getElementById('video_container');

video.src = "flash/video" + node.value + ".swf";

}

</SCRIPT>

<table border="0" cellspacing="2">

<tr><br /><br /><br /><br /><br /><br /></tr> <tr>

<td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">

<tr>

<td><img src="img/latest news.jpg" alt="ee" width="41" height="34" /></td>

<td style="padding-left:15px;"><p align="left"><span class="style20"><strong>Lastest News</strong> |

Download here</span> </p></td>

</tr>

</table></td>

</tr>

<tr>

<td style="padding-left:2px;"><table width="239" border="0" cellpadding="0" cellspacing="0" bgcolor="#d4d8d9">

<tr>

<td width="41"><a href="index.php?l1=161&l2=171"><img src="img/careers.jpg" alt="ee" width="41" height="34" border="0" /></a></td>

<td style="padding-left:15px;"><a href="index.php?l1=161&l2=171" class="tablink"><b>Career</b> | Apply now!</a></td>

</tr>

</table></td>

</tr>

<tr>

<td ><table width="100%" border="0" cellpadding="3">

<tr>

<td>Video</td>

<td><select name="select" id="numpage" onchange="change(this);">

<option id="0" value="0">VFM - ad</option>

<option id="1" value="1">VFM - Introduction</option>

<option id="2" value="2">VFM - VietNam: The potential market</option>

</select>

</td>

</tr>
</table>

<param name="quality" value="high" />

<embed id="video_container" src="flash/video0.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="250"></embed>

</tr>

</table>
[/html]

Mar 3 '08 #10

th1982

pls help!!!
have any solutions for this?
thanks alot

Mar 5 '08 #11

gits

5,390

Expert Mod 4TB

hi ...

may be we have to rewrite the entire embed-node ... so try this:

Expand|Select|Wrap|Line Numbers

 
function change(node) {

    var video   = document.getElementById('video_container');

    var n_video = video.cloneNode(true);
 
    n_video.src = "flash/video" + node.value + ".swf";
 
    video.parentNode.replaceChild(n_video, video);

}

kind regards

Mar 6 '08 #12

th1982

Finnaly , it's worked.Thanks alot gits.Pls help me next time
best regards.

Mar 7 '08 #13

gits

5,390

Expert Mod 4TB

no problem :) ... thats the purpose of this forum :D ... so post back to the forum anytime you have more questions ...

kind regards

Mar 7 '08 #14

th1982

Hi gits
i have problem when i run this script in IE:http://www.purpleasia.com/clients/VF...dex.php?l1=161
FF is no problem
why is it?thanks so much

Mar 27 '08 #15

gits

5,390

Expert Mod 4TB

i don't have an IE (mac-user ;) ) ... so what is not working ... do you get an error?

kind regards

Mar 27 '08 #16

th1982

oh sorry!
only first clip can run,second and third clips are not disappeared
and select box very small , i can only see "V"character(in FF i can see the full text inside the select box).
thanks to yr answer.

Mar 27 '08 #17

gits

5,390

Expert Mod 4TB

hmmm ... the selectbox issue comes from you selects css style - just remove it to see the effect ...

the other issue with the replacing of the nodes ... seems to be an IE bug (look here ) and may be you should replace the embed with the object tag - which is the w3c standards-compliant way to embed flash ... have a look at the link in the answers at quirksmode.org (i mean this one) ...

kind regards

Mar 27 '08 #18

th1982

Thanks very much!!!
I've tried to put it in 2 ways like this :
First :
[html]<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="204" HEIGHT="183" id="video_container"><PARAM NAME=movie VALUE="flash/video0.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src="flash/video0.swf" quality=high bgcolor=#FFFFFF WIDTH="204" HEIGHT="183"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT> [/html]

Second :

[html]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"" width="204" height="183" id="video_container"><param name="movie" value="flash/video0.swf" /> <param name="quality" value="high" /> </object>
[/html]

Results : FF and IE : only play video0.swf which we put in the code.
are anything wrong from these code?

Thanks
best regards

Mar 28 '08 #19

gits

5,390

Expert Mod 4TB

... and you have to change the javascript function too ... since the movie-src is now defined in the param-node ...

kind regards

Mar 28 '08 #20

th1982

the function will be like this ,am i right?

[html]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function change(node) {

var movie = document.getElementById('video_container');
var n_movie = movie.cloneNode(true);

n_movie.value= "flash/video" + node.value + ".swf";

movie.parentNode.replaceChild(n_movie, movie);

}

</SCRIPT>
[/html]

Mar 28 '08 #21

gits

5,390

Expert Mod 4TB

nope ... that should have worked with the 'embed-version' ... :)

try this:

Expand|Select|Wrap|Line Numbers

 
function change(node) {

    var video = document.getElementById('video_container');

    var o_param = video.getElementsByTagName('param')[0];

    var n_param = o_param.cloneNode(true);
 
    n_param.setAttribute('value', 'flash/video' + node.value + '.swf');
 
    n_param.parentNode.replaceChild(n_param, o_param);

}

kind regards

Mar 28 '08 #22

th1982

i changed the code like this :

[html]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function change(node) {
var video = document.getElementById('video_container');
var o_param = video.getElementsByTagName('param')[0];
var n_param = o_param.cloneNode(true);

n_param.setAttribute('value', 'flash/video' + node.value + '.swf');

o_param.parentNode.replaceChild(n_param, o_param);
}

</SCRIPT>
<table>
<tr>

<td style="padding-left:0px;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>
<td><img src="img/latestnews.gif" width="204"></td>
</tr>

</table></td>

</tr>

<tr>

<td style="padding-left:0x;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img src="img/career-icon.gif" width="204" border="0"></td>

</tr>

</table></td>

</tr>

<table>
<tr>

<td align="right" bgcolor="#cacfd0"><table width="100%" border="0" cellpadding="3">

<tr>

<td>Video</td>

<td><select name="select" style="width:140px;" onchange="change(this);">

<option id="0" value="0">VFM - ad</option>

<option id="1" value="1">VFM - Introduction</option>

<option id="2" value="2">VFM - VietNam: The potential market</option>

</select>

</td>

</tr>
</table>



<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"" width="204" height="183" id="video_container"><param name="movie" value="flash/video0.swf" /> <param name="quality" value="high" /> </object>
</tr></table>
[/html]

but the video's disappeared in FF , and in IE ,video0 appear but can not change to the others

Mar 29 '08 #23

th1982

sorry gits!
pls try to help me to solve this problem.
thanks
best regards

Apr 1 '08 #24

gits

5,390

Expert Mod 4TB

ok ... the following solution seems to work ... but i don't like it very much ... due to some browser-specs that have to be used here:

the js-function should be:

Expand|Select|Wrap|Line Numbers

 
function change(node) {

    var video     = document.getElementById('video_container');

    var o_param   = video.getElementsByTagName('param')[0];

    var src       = 'flash/video' + node.value + '.swf';

    o_param.value = src;
 
    var embd      = video.getElementsByTagName('embed')[0];

    embd.setAttribute('src', src);
 
    var n_video   = video.cloneNode(true);
 
    video.parentNode.replaceChild(n_video, video);

}

and the flash should be embeded the following way:

[HTML]<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="270" height="183" id="video_container">
<param name="movie" value="flash/video0.swf" />
<embed src="flash/video0.swf" width="270" height="183"
quality="high" name="movie"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>[/HTML]

Apr 2 '08 #25

th1982

thanks gits!!
but still did not work in IE...hixhix....

Apr 4 '08 #26

gits

5,390

Expert Mod 4TB

it has to ... i just tested in IE6 and firefox 2.0.0.13 ... what IE makes the problem?

kind regards

Apr 4 '08 #27

th1982

thanks gits!
the problem is can not change video in IE, i only can play video0.swf when i click another one , its still video0.swf. firefox is ok .i m using IE 7
what is the problem ?
best regards

Apr 6 '08 #28

gits

5,390

Expert Mod 4TB

please post the code you currently use ...

kind regards

Apr 6 '08 #29

th1982

[HTML]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function change(node) {
var video = document.getElementById('video_container');
var o_param = video.getElementsByTagName('param')[0];
var src = 'flash/video' + node.value + '.swf';
o_param.value = src;

var embd = video.getElementsByTagName('embed')[0];
embd.setAttribute('src', src);

var n_video = video.cloneNode(true);

video.parentNode.replaceChild(n_video, video);
}

</SCRIPT>
<table>
<tr>

<td style="padding-left:0px;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>
<td><img src="img/latestnews.gif" width="204"></td>
</tr>

</table></td>

</tr>

<tr>

<td style="padding-left:0x;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><a href="apply_form.php"><img src="img/career-icon.gif" width="204" border=""></a></td>

</tr>

</table></td>

</tr>

<table>
<tr width="204px" bgcolor="#c0c8c7">

<td align="right"><table width="100%" border="0" cellpadding="3">

<tr>

<td>Video
<select name="select" style="width:140px;" onchange="change(this);">

<option id="0" value="0">VFM - ad</option>

<option id="1" value="1">VFM - Introduction</option>

<option id="2" value="2">VFM - VietNam: The potential market</option>

</select> </td>

</tr>
</table>





<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="204" height="200" id="video_container">
<param name="movie" value="flash/video0.swf" />
<embed src="flash/video0.swf" width="204" height="235"
quality="high" name="movie"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

</tr></table>[/HTML]

Apr 6 '08 #30

th1982

Hi gits
have you seen any problem with my code?
Thanks gits

Apr 10 '08 #31

gits

5,390

Expert Mod 4TB

Hi gits
have you seen any problem with my code?
Thanks gits

unfortunatly not yet ... have to test it at a windows machine with an IE on it :) ...
may be today i'll find time for it ...

kind regards

Apr 10 '08 #32

gits

5,390

Expert Mod 4TB

it seems to be a problem with retrieving the emebed-node in IE from the object so we just avoid it in that case with the following code:

Expand|Select|Wrap|Line Numbers

 if (typeof window.event == 'undefined') {

    var embd = video.getElementsByTagName('embed')[0];

    embd.setAttribute('src', src);

}

just replace the lines in the code and it should work now :)

kind regards

Apr 10 '08 #33

th1982

Thanks gits

pls check my code :

[HTML]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function change(node) {
var video = document.getElementById('video_container');
var o_param = video.getElementsByTagName('param')[0];
var src = 'flash/video' + node.value + '.swf';
o_param.value = src;

if (typeof window.event == 'undefined') {

var embd = video.getElementsByTagName('embed')[0];

embd.setAttribute('src', src);

}

var n_video = video.cloneNode(true);

video.parentNode.replaceChild(n_video, video);
}

</SCRIPT>
<table>
<tr>

<td style="padding-left:0px;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>
<td><a href="index.php?l1=163&l2=166"><img src="img/latestnews.gif" width="204" border="0"></a></td>
</tr>
<tr><td colspan="0" bgcolor="#c0c8c7" align="left" > <?php include("small.php"); ?></td></tr>

</table></td>

</tr>

<tr>

<td style="padding-left:0x;"><table width="200" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><a href="apply_form.php"><img src="img/career-icon.gif" width="204" border=""></a></td>

</tr>

</table></td>

</tr>

<table>
<tr width="204px" bgcolor="#c0c8c7">

<td align="right"><table width="100%" border="0" cellpadding="3">

<tr>

<td>Video
<select name="select" style="width:140px;" onchange="change(this);">

<option id="0" value="0">VFM - ad</option>

<option id="1" value="1">VFM - Introduction</option>

<option id="2" value="2">VFM - VietNam: The potential market</option>

</select> </td>

</tr>
</table>





<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="204" height="200" id="video_container">
<param name="movie" value="flash/video0.swf" />
<embed src="flash/video0.swf" width="204" height="235"
quality="high" name="movie"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

</tr></table> [/HTML]

It still does not work.and get the same problem,not change video,only play video0.swf

Apr 14 '08 #34

gits

5,390

Expert Mod 4TB

i just copied your code and tested in FF and IE6 and it worked as expected ... what IE is not working? do you get any errors?

Apr 14 '08 #35

th1982

Thanks gits
But my IE is 7, maybe problem from it?
thanks

Apr 16 '08 #36

gits

5,390

Expert Mod 4TB

that could be ... but if that is the case i first have to find a machine here to test the code with such a IE7 ... since i don't have one already :)

kind regards

Apr 16 '08 #37

th1982

thanks gits
that is so good to me to learn.
thanks so much.see you soon in orher topic
best regards

Apr 17 '08 #38

Javascript and flash

Similar topics