IE中的Flash叠加层

我在我的网站上有一个Flash播放器，我想添加一个叠加层以插入HTML。这个想法是，在显示HTML之前，包含flash的div会将其不透明度设置为0.5。我在谷歌浏览器和火狐浏览器中获得了很好的效果，但一如既往，IE让我头疼。我将wmode设置为不透明（并尝试透明），但IE的行为很奇怪。为了让我的div在Flash视频之上显示，我将它的位置设置为绝对值，并为其赋予比任何其他元素更高的z-index。IE中的Flash叠加层

问题是，IE9不显示HTML我附加到我的div从jQuery。足够公平的，我可以忍受从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并不欣赏它。另外，当这样做时，我不能点击播放器来开始/停止播放。

任何想法？任何建议，非常感谢。先谢谢你！

来源

2011-09-23 Andy0708

“当显示叠加，玩家不再响应，当我点击它”

是的，这是当一个HTML元素定位在一个swf的顶部会发生什么; swf被遮挡，因此无法与之交互。

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

IE是一般的动画不透明度，特别是IE8（在我的经验）非常糟糕。渲染引擎实际上似乎在后来的版本中变得更糟。

来源

2011-09-23 12:23:05 marissajmc

是的，但它也停止响应，即使在覆盖层没有覆盖的地方，我发现这很奇怪。我最后一部分同意你的看法。我可以写很多关于IE有多恐怖的页面，但不幸的是很多人使用它，所以需要使它成为可能。幸运的是，jQuery帮助我们了很多。 :-) – Andy0708

IE中的Flash叠加层

回答

相关问题