Journey won't stop playing! (Changing Embed Object's Values With JQuery Doesn't Change Playing Video)

I have a page with the following video player:

<div id="flashContent"> 
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="589" height="470" id="Take5" align="middle"> 
                <param name="movie" value="DontStopBelievin.swf" id="ee1" /> 
                <param name="quality" value="high" /> 
                <param name="bgcolor" value="#f7f7f7" /> 
                <param name="play" value="true" /> 
                <param name="loop开发者_JAVA技巧" value="true" /> 
                <param name="wmode" value="window" /> 
                <param name="scale" value="showall" /> 
                <param name="menu" value="true" /> 
                <param name="devicefont" value="false" /> 
                <param name="salign" value="" /> 
                <param name="allowScriptAccess" value="sameDomain" /> 
                <!--[if !IE]>--> 
                <object type="application/x-shockwave-flash" data="DontStopBelievin.swf" width="589" height="470" id="ininplay"> 
                    <param name="movie" value="DontStopBelievin.swf" id="ee2" /> 
                    <param name="quality" value="high" /> 
                    <param name="bgcolor" value="#f7f7f7" /> 
                    <param name="play" value="true" /> 
                    <param name="loop" value="true" /> 
                    <param name="allowFullScreen" value="true" /> 
                    <param name="wmode" value="window" /> 
                    <param name="scale" value="showall" /> 
                    <param name="menu" value="true" /> 
                    <param name="devicefont" value="false" /> 
                    <param name="salign" value="" /> 
                    <param name="allowScriptAccess" value="sameDomain" /> 
                <!--<![endif]--> 
                    <a href="http://www.adobe.com/go/getflash"> 
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
                    </a> 
                <!--[if !IE]>--> 
                </object> 
                <!--<![endif]--> 
            </object> 
        </div> 

And links with onclick functions which call:

function changeMedia(id) {
    $('object#ininplay').attr('data', id + ".swf");     
    $('param#ee1').attr('value', id + ".swf");      
    $('param#ee2').attr('value', id + ".swf");      
}

This works great in that when I use Chrome's Inspect Element tool I can see that the aforementioned values have been changed to a valid and different file, and yet the original movie just keeps on playing...

I've listened to Don't Stop Believing thirteen times now on loop.

Simply setting different parameter values for the embedded object data does not mean the flash player will re-evaluate them. Your values are indeed being changed, but the embedded flash player simply ignores them after it has loaded.

You could try removing the entire 'flashcontent' div and replacing it with a new one.

You can easily do this with swfObject

which you can get and read about here

... or you could use jQuery's templating plugin