object, param, jquery

Question

<object width="438" height="280" id="pano" >
    <param value="url_flash" name="movie" />
    <param value="false" name="menu"/>
    <param value="high" name="quality"/>
    <param value="#FFFFFF" name="bgcolor"/>
    <embed width="438" height="280" pluginpage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="pano" bgcolor="#FFFFFF" quality="high" menu="false" src="url_flash"/>
</object>

I have this flash code, what I want is that when I click some buttons to change with jquery <embed src=''> (for firefox) and the first <param> (for IE)

How I can do that?

This works for embed but how I can do for param in IE ?

$('.link a').click(function() {

    var urlconst = 'changed_url';

    $(".flash_photo embed").attr({
        src: changed_url          
    });

I tried

$('#pano param:first').val(changed_url)  

But that doesn't work.

Solution 1

Have you considered using jQuery SWFObject plugin?

http://jquery.thewikies.com/swfobject/

Solution 2

After searching for info, it seems you cannot dynamically change the param element's attributes dynamically. The simplest way will probably be to pull the element's HTML into a variable, feed that back into jQuery, and use CSS selectors on that. Then you could clear the object and replace it with the new code.

var url = (url here);
var code = $("#embedded").html();
var newcode = $("param:first", code).attr("src", url).html();
$("#embedded").html(newcode);

or something like that... ;)

Solution 3

EDIT

The behavior I described below only takes place in IE in particular situations. When the object element was present in the loaded DOM, I could update the value for the param element named movie, but the state of the object didn't change. And the object can't be easily refreshed as far as I know. It looks like the best way is to remove the object element and add a fresh one. For that, it seems like the SWFObject jQuery plugin that SolutionYogi suggests, or something similar, might indeed be the best way to go.

ORIGINAL

From what I see when I try this out in IE8, IE retains only the embed elements as the page is loaded, not the object and param elements. So you can't change that value of the param because it no longer exists.

So if this gets served:

<object width="425" height="344">
    <param name="movie" 
        value="http://www.youtube.com/v/ePXlkqkFH6s&hl=en&fs=1&"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/ePXlkqkFH6s&hl=en&fs=1&" 
        type="application/x-shockwave-flash"
        allowscriptaccess="always" 
        allowfullscreen="true" 
        width="425" height="344"></embed>
</object>

It becomes only this in the IE DOM:

<embed src="http://www.youtube.com/v/ePXlkqkFH6s&hl=en&fs=1&" 
    type="application/x-shockwave-flash"
    allowscriptaccess="always" 
    allowfullscreen="true" 
    width="425" height="344"></embed>

To get a movie to update in IE, I had to cause IE to reparse the HTML for embed. The following seemed to work:

var placeHolder = $("<div />");
var tempParent = $("<div />");
var embed = $("#movieparent embed");
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", newSrcUrl);
placeHolder.replaceWith(tempParent.html());