Problems with cloning an object (.clone) in IE
I am cloning a flash in ie and change some variable while that. This is the function:
$(function() {
$("select[name='variation3']").live('change', function() {
var player = $(this).parent().parent().parent().find('object:first');
if(player.length == 0)
player = $(this).parent().parent().parent().find('.player_not_single, .player_singele');
var $param = player.find("param[name='flashvars']");
var path = player.closest('.post1').attr('data-demo');
//$param.attr('value', $param.attr('value').replace(/soundFile=([^&]+)/, 'soundFile=' + path + $(this).find(':selected').val() + '.mp3'));
$param.attr("value", function(i,v) { return v.replace(/soundFile=([^&]+)/, 'soundFile=' + path + $(this).find(':selected').val() + '.mp3'); });
var new_player = player.clone();
new_player.insertBefore(player);
player.remove();
});
});
In FF it works fine, but inIE it makes problems. This is the code before the cloning:
<object name="audioplayer_1" width="270" height="24" id="audioplayer_1"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
style="outline-style:none; outline-color:invert; outline-width:medium;">
<param name="bgcolor" value="#FFFFFF"/>
<param name="wmode" value="transparent"/>
<param name="menu" value="false"/>
<param name="flashvars" value="animation=no&encode=no&initialvolume=60&remaining=no&noinfo=yes&buffer=3&checkpolicy=no&rtl=no&bg=363635&text=333333&leftbg=4f4f4f&lefticon=787171&volslider=71bced&voltrack=777987&rightbg=4d4d4d&rightbghover=66a7d9&righticon=969696&righticonhover=000000&track=c2bebe&loader=5f91f5&border=000000&tracker=90b7d1&skip=b3b3b3&soundFile=http%3A%2F%2Fwww.gameaudio.net%2Fprelisten%2Fanotherworld%2Ffulledit.mp3&playerID=audioplayer_1"/>
<param name="movie" value="http://www.gameaudio.net/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1"/>
</object>
And this the code after cloning:
<object name="audioplayer_1" width="270" height="24" id="audioplayer_1"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
style="outline-style:none; outline-color:invert; outline-width:medium;">
<param name="_cx" value="7143"/>
<param name="_cy" value="635"/>
<param name="FlashVars" value=""/>
<param name="Movie" value="http://www.gameaudio.net/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1"/>
<param name="WMode" value="Transparent"/>
<param name="BGColor" value="FFFFFF"/>
[...]
</object>
It is not the same. In parts yes, but not all and esp. the most important parts are missing. What could be the error?
UPDATE: This is my current code: 'function embedAudioPlayer(replaceElemIdStr, audioFile) {
swfobject.embedSWF(
"http://www.gameaudio.net/wp-content/plugins/audio-player/assets /player.swf?ver=2.0.4.1",
replaceElemIdStr,
width,
height,
"9.0.115",
"expressInstall.swf",
{
soundFile: audioFile
});
}
$(function() {
$("select[name='variation3']").live('change', function() {
player = $(this).parent().parent().parent().find('.player_not_single, .player_singele');
var $param = player.find("param[name='flashvars']");
var path = player.closest('.post1').attr('data-demo');
var audioFile = path + $(this).find(':selected').val() + '.mp3';
var uniqueId = 'audio-' + +new Date;
player.replaceWith('<div id="+uniqueId+"/>');
embedAudioPlayer(uniqueId, audioFile);
}); '
function embedAudioPlayer(replaceElemIdStr, audioFile) { var swfobject = audioplayer_swfobject;
swfobject.embedSWF( "http://www.gameaudio.net/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1", replaceElemIdStr, 250, 50, "9.0.115", "expressInstall.swf", { soundFile: audioFile }); }$(function() {
$("select[name='variation3']").live('change', function() {
player = $(this).parent().parent().parent().find('.player_not_single, .player_singele');
var $param = player.find("param[name='flashvars']");
var path = player.closest('.post1').attr('data-demo');
var audioFile = path + $(this).find(':selected').val() + '.mp3';
var uniqueId = 'audio-' + +new Date;
player.replaceWith('<div id="+uniqueId+"/>');
embedAudioPlayer(uniqueId, audioFile);
});
Update:
` function embedAudioPlayer(replaceElemIdStr, audioFile) { var swfobject = audioplayer_swfobject;
swfobject.embedSWF( "http://www.gameaudio.net/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1", replaceElemIdStr, 250, 50, "9.0.115", "expressInstall.swf", { soundFile: audioFile }); }$(function() {
$("select[name='variation3']").live('change', function() {
player = $(this).parent().parent().parent().find('.player_not_single, .player_singele');
var $param = player.find("param[name='flashvars']");
var path = pla开发者_如何学Pythonyer.closest('.post1').attr('data-demo');
var audioFile = path + $(this).find(':selected').val() + '.mp3';
var uniqueId = 'audio-' + +new Date;
player.replaceWith('<div id="+uniqueId+"/>');
embedAudioPlayer(uniqueId, audioFile);
});`
Firefox and everything but IE uses the Netscape Plugin Application Programming Interface (NPAPI) for Flash. Firefox (et al.) use the param
elements but IE reads from the attributes. It's annoying specifying everything twice but that's what you have to do unless you're using something like swfobject that does it for you (highly recommended) .
Updated based on using swfobject:
Sounds like you're essentially trying to reimplement swfobject.embedSWF
Using jQuery.clone
. I'm sure it could be made to work but I suggest you stick to swfobject for Flash embedding and jQuery for the DOM. I'd use the following structure:
function embedAudioPlayer(replaceElemIdStr, audioFile) {
// customize these options for the audio player you're using
swfobject.embedSWF(
"yourplayer.swf",
replaceElemIdStr,
width,
height,
"9.0.115",
"expressInstall.swf",
{
soundFile = audioFile
});
}
$("select[name='variation3']").live('change', function() {
// ...
var audioFile = path + $(this).find(':selected').val() + '.mp3';
var uniqueId = 'audio-' + +new Date;
player.replaceWith('<div id="+uniqueId+"/>');
embedAudioPlayer(uniqueId, audioFile);
});
- Create a
embedAudioPlayer
function and use it for everything both at initial page load and in response to page events. - When responding to page events use jQuery to determine the soundFile url and the destination element where a new audio player should be created.
精彩评论