Question

我的网站上有一个flash播放器，我想添加一个可以插入HTML的叠加层。我们的想法是，在显示HTML之前，包含flash的div会将其不透明度设置为0.5。我在谷歌Chrome和Firefox中运行得很好，但一如既往，IE给我带来了麻烦。我将wmode设置为opaque（也尝试透明），但IE表现得很奇怪。为了使我的div显示在flash视频之上，我将其位置设置为绝对值，并使其比任何其他元素更高的z-index。

问题是IE9没有显示我从jQuery附加到我的div的HTML。很公平，我可以将它从PHP中添加到隐藏的div中。然而，最大的问题是IE不会让我像Chrome和Firefox（可能还有其他浏览器）那样动画flash播放器的不透明度，以及让我与flash播放器进行交互。显示叠加层时，当我点击它时，播放器不再响应。

IE需要一些解决方法，但到目前为止我还无法找到不透明度衰减的解决方法。现在是代码。

DOM：

<div class="videoPaths" style="z-index: 9999;">
    This is the overlay container
</div>

<div class="videoWrapper">
    <script src="swfobject/swfobject.js"></script>

    <div id="VideoPlayer" class="embedded-video">
        <div class="no-flash">You don't have flash</div>
    </div>

    <script>swfobject.embedSWF("http://url.com/v.swf", "VideoPlayer", "590", "332", "9.0.0", "/swfobject/expressInstall.swf", {}, {wmode:'opaque', allowscriptaccess:'always', allowfullscreen:'true', FlashVars:'token=my_token&photo%5fid=my_id'}, {id:'VideoPlayer', name:'VideoPlayer'});</script>
</div>

JavaScript（jQuery）： - 为了说明目的而简化

// Animate opacity to 0.5
$('.videoWrapper').animate({ opacity: 0.5 }, { duration: 1000, queue: false, complete: function() { showOverlay(); } });

function showOverlay() {
    // Show overlay text
    $('.videoPaths').html('<h2>This is the overlay text I want to show</h2>');
}

CSS：

.videoPaths {
    position: absolute;
    top: 100px;
    text-align: center;
    width: 590px;
}

在上面的代码中，我没有显示我用jQuery附加的HTML，但就像我说的，我可以通过将其直接添加到DOM中来解决这个问题，因为IE会显示它。但是，我希望不透明度动画能够工作，但IE9并不欣赏它。此外，当这样做时，我无法点击播放器来开始/停止播放。

有什么想法吗？任何建议都非常感谢。提前谢谢！

Answer 1

“显示叠加层时，点击播放器时播放器不再响应”

是的，当html元素位于swf顶部时会发生这种情况; swf被遮挡，因此无法与之互动。

“与Chrome和Firefox不同，IE不会让我为Flash播放器的不透明度设置动画”

IE通常在动画效果方面非常糟糕，尤其是IE8（根据我的经验）。实际上，渲染引擎在以后的版本中似乎变得更糟。

IE中的Flash叠加

1 个答案: