Problem in changing flash (swf) file location in embed or param tag using JavaScript

Problem in changing flash (swf) file location in embed or param tag using JavaScript

Manipulating the DOM (Document Object Model) using JavaScirpt is known to all. Changing the src attribute of the img (Image tag) tag using JavaScript is very common. But I had a problem in changing the flash (swf) file location in embed or param tag using JavaScript. I had following html code for my flash creative:
<div id="bannerCode">
	<object width="422" height="62"
	classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
		<param name="movie"
			value="//www.viralpatel.net/bannerImages/f9039149_3.swf" />
		<param name="quality" value="high" />
		<embed width="422" height="62"
			src="//www.viralpatel.net/bannerImages/f9039149_3.swf" quality="high"
			type="application/x-shockwave-flash"
			pluginspace="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>
First I tried to change the src attribute of the embed tag and value attribute of the param tag (with name=”movie”). type using following JavaScript.
objDiv = document.getElementById("bannerCode"); //this will return the "object" of the div tag containing the flash code
objDiv = arrTagObject = objDiv.getElementsByTagName("object"); //gives array of all the object tag inside the "bannerCode" div which containing the flash code
for(i=0 ; i<arrTagObject.length;i++)
{
        arrTabObject[i].width = new_width;
        arrTabObject[i].height = new_height;
        arrTagParam = arrTagObject[i].getElementsByTagName("param"); //this will return the "param" of the div tag containing the flash code
        for(j=0;j<arrTagParam.length;j++)
        {
                if("movie" == arrTagParam[j].name)
                {
                        arrTagParam[j].value = new_flash_location; // set the new location for the flash (swf) movie
                }
        }
}
arrTagEmbed = objDiv.getElementsByTagName("embed");
arrTagEmbed[0].width = new_width;
arrTagEmbed[0].height = new_height;
arrTagEmbed[0].src = new_flash_location;
[/code]
But the above code didn't work, neither in <strong>Firefox</strong> nor in <strong>IE6</strong> (<strong>Internet Explorer 6</strong>). Even I checked in <strong>FireBug</strong> (the <strong>FireFox plugin</strong> to see the <strong>DOM-Document Object Model</strong>). In firebug all the attributes like height width and src of embed, all were set to new value but still the old <strong>Flash</strong> (<strong>swf</strong>) movie was displayed.

Changing the <strong>src (source) attribute</strong> of the embed tag won’t render the new <strong>flash (swf)</strong> movie. You need to put the <strong>div tag</strong> around your flash object or embed code and do replace the <strong>innerHTML of the div tag</strong> using the document.getElementById("divTagId").innerHTML = new_flash_code.

Following code works for me.
<!-- wp:code {"language": "javascript"} --><pre class="wp-block-code"><code></code></pre><!-- /wp:code -->
str1 =str1 += "\" height=\"" + new_height;
str1 += "\"codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0\"
classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param value=\"";
str1 += new_flash_location + "\" name=\"movie\"/><param value=\"high\" name=\"quality\"/><embed width=\"";
str1 += new_width + "\" height=\"";
str1 += new_height + "\"pluginspace=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" quality=\"high\" src=\"";
str1 += new_flash_location + "\"/></object>";
document.getElementById("bannerCode").innerHTML = str1;
Get our Articles via Email. Enter your email address.

You may also like...

1 Comment

  1. Patrik says:

    This is a way to to it in non-IE browsers without replacing anything:
    *note that I’m using jQuery functions here but any js would work :)

    var flashObjectChildArray = [getObjectTag].children();
    $(flashObjectChildArray ).each(function(i) {
    	// if node contains the attribute name:movie
    	if ($(flashObjectChildArray [i]).attr('name') == 'movie') {
    		$(flashObjectChildArray [i]).attr('value', [urlToYourNewFlashFile]);
    	}
    	// if node is an embed tag
    	if (flashObjectChildArray [i].tagName.toLowerCase() == 'embed') {
    		$(flashObjectChildArray [i]).attr('src', [urlToYourNewFlashFile]);
    	}
    });
    

Leave a Reply

Your email address will not be published. Required fields are marked *