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: 185

Filed under:
|
|

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

Related posts about JavaScript

Related posts about video-streaming