jquery - IE8 定位 DIV 覆盖错误并在隐藏时继续播放视频

Question

请看:http://www.binarymark.com/Products/PasswordGenerator/default.aspx (概览选项卡，在图表上)。问题是当你点击任何图表元素时说“字符组”所有浏览器，除了 IE8 表现良好 - 即它们显示叠加层，开始播放视频，当叠加层关闭时，视频停止播放并div 是隐藏的。另一方面，IE8 有两个缺陷:它将覆盖方式定位在底部和右侧太多，更烦人的是 - 即使覆盖 div 关闭，它仍会在后台播放视频!我使用 flowplayer.org/tools/overlay/进行叠加。你能帮忙吗？谢谢。

Answer 1

这是 IE 中已确认的问题(google 一下，您会看到很多投诉)。 This post on SO建议在每次显示/隐藏选项卡时删除并重新添加或克隆并重新添加对象。

另一种方法是使用 YouTube JavaScript Player API，因为您似乎只使用嵌入式 YouTube 视频。并在每次显示和/或隐藏选项卡时停止视频。

已更新以包含示例:

在深入了解 YouTube JS API 之后，我建议使用前一种解决方案。如果您不使用 SWFObject 加载每个视频，则会出现两个跨浏览器错误，这最终会比您可能愿意花费的工作量更多。对于单个视频，我能够在没有 SWFObject 的情况下获得跨浏览器解决方案，但它不会轻易转换为您当前的设置:

<p><a id="showhide" href="#show">show/hide with YT API pause</a></p>

<div id="tab">
    <object id="video1" width="640" height="385" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/sUO4bnWtlnE&hl=en_US&fs=1&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always"  width="640" height="385"></embed>
    </object>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    (function () {
        var tab = $('#tab'),
            video1 = $('#video1')[0];
        $('#showhide').click(function (evt) {
            if (video1.pauseVideo) video1.pauseVideo();
            tab.toggle();
            return false;
        });
    })();
</script>

在 jsFiddle 上 here .