IE中的Flash覆盖

Question

我的网站上有一个 Flash 播放器，我想添加一个可以插入 HTML 的叠加层。这个想法是包含 Flash 的 div 将在显示 HTML 之前将其不透明度设置为 0.5。我在 Google Chrome 和 Firefox 中运行良好，但与往常一样，IE 让我头疼。我将 wmode 设置为不透明（也尝试过透明），但 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 被遮挡，因此无法与之交互。

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

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