jQuery problem cloning/appending flash movie on IE8
I have a problem switching the content of a div using jQuery functions clone and append.
In a few words, I'm using two links to show and hide flash videos: link1 shows video1 and hides video2. Link2 shows video2 and hides video1.
Here's the code I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
<div class="videoholder">
<div id="box1">
<object width="300" height="225">
<param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&hl=en_US&rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
</object>
<p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
</div>
<div id="box2">
<object width="300" height="225">
<param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&hl=en_US&fs=1?rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/HxBRdJCV8Os&hl=en_US&fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
</object>
<p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
</div>
</div>
<script type="text/javascript">
$("#box1").show().siblings().hide(); // Default video
$(".sele").click(function(){
switch(this.name) {
case "box1" :
var box2 = $("#box2").clone(true);
$("#box2").remove();
$(".videoholder").append(box1);
$(".videoholder").append(box2);
$("#box1").sho开发者_JAVA技巧w().siblings().hide(); //
break;
case "box2" :
var box1 = $("#box1").clone(true);
$("#box1").remove();
$(".videoholder").append(box2);
$(".videoholder").append(box1);
$("#box2").show().siblings().hide(); //
break;
}
});
</script>
</div>
</body>
</html>
This is the closest thing I have done to make it work in IE. I would be easier just to use
<script type="text/javascript">
$("#box1").show().siblings().hide(); // Default
$(".sele").click(function(){
$("#" + this.name).show().siblings().hide();
});
</script>
But that doesn't work on IE: the hidden video keeps playing.
I thank you for all the ideas you want to share.
Best wishes. Luis
You need to set the WMODE to 0 or transparent. Fix'd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
<div class="videoholder">
<div id="box1">
<object width="300" height="225">
<param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&hl=en_US&rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
</object>
<p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
</div>
<div id="box2">
<object width="300" height="225">
<param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&hl=en_US&fs=1?rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/HxBRdJCV8Os&hl=en_US&fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
</object>
<p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
</div>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论