显示/隐藏视频时在IE中重叠音频

Question

我有一个缩略图列表，其中包含指向各个视频的链接。除了IE之外，所有的浏览器都能正常工作。在IE中，如果我启动一个视频并(没有单击暂停或停止)单击下一个视频的缩略图，音频将继续播放。换句话说，两个视频的音频一次播放。有什么建议吗？

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>

显示/隐藏代码：

$(".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");

Answer 1

与其在后台加载所有不同的播放器，不如考虑加载单个播放器，如果可用，使用API的命令从该实例中的不同URL加载视频。当不使用API时，您可能希望向浏览器的DOM动态添加/删除适当的对象。

代码示例(用于后一种选项)

$(".vidButton").click(function()
{
    if ($('#video_container embed').length() > 0) $('#video_container embed').remove(); // remove an existing player from the DOM if it exists

    var buttonID = $(this).attr('id'); // get ID of the button clicked
    var dyn_object = document.createElement("embed"); // create a dynamic HTML embed object
    $(dyn_object).appendTo($('#video_container')); // append the object to the DOM before doing anything to avoid potential memory leaks
    $(dyn_object).attr("type", "application/x-shockwave-flash");
    $(dyn_object).attr("src", "http://www.website.com/player.swf");
    $(dyn_object).attr("flashvars", "file=http://www.website.com/movies/movie_" + buttonID + ".flv");
    // ... optionally add more attributes here
});