Overlapping audio in IE when I show/hide videos
- by user1062448
I have a thumbnail list with links to individual videos. Everything works fine in all browsers but IE. In IE, if I start a video and (without slicking pause or stop) click on the thumbnail for the next video, the audio continues playing. In other words, the audio for both videos plays at once. Any suggestions?
HTML:
<ul class="videoButtons">
<li><a class="vidButton" href="javascript:void(0)" id="1" ><img src="images/videoPics/vid1Thumb.jpg" /><br />video title</a></li>
<li><a class="vidButton" href="javascript:void(0)" id="2" ><img src="images/videoPics/vid2Thumb.jpg" /><br />video title</a></li>
<li><a class="vidButton" href="javascript:void(0)" id="3" ><img src="images/videoPics/vid3Thumb.jpg" /><br />video title</a></li>
</ul>
<div class="box" id="video1">
<!--flv embedded object - FLVPlayer-->
</div>
<div class="box" id="video2">
<!--flv embedded object - FLVPlayer1-->
</div>
<div class="box" id="video3">
<!--flv embedded object - FLVPlayer2-->
</div>
Show/Hide code:
$(".vidButton").click(function()
{
var buttonID = $(this).attr('id'); // get ID of the button clicked
var video = $('#'+'video'+buttonID); // add ID number to video
$('.box').hide(); // hide all other divs
video.fadeTo("slow", 1); // show video
});
});
// video objects
swfobject.registerObject("FLVPlayer");
swfobject.registerObject("FLVPlayer1");
swfobject.registerObject("FLVPlayer2");
