Overlapping audio in IE when I show/hide videos
        Posted  
        
            by 
                user1062448
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by user1062448
        
        
        
        Published on 2011-11-23T17:47:08Z
        Indexed on 
            2011/11/23
            17:50 UTC
        
        
        Read the original article
        Hit count: 238
        
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");
        © Stack Overflow or respective owner