我在我的网站上有一个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并不欣赏它。另外,当这样做时,我不能点击播放器来开始/停止播放。
任何想法?任何建议,非常感谢。先谢谢你!
是的,但它也停止响应,即使在覆盖层没有覆盖的地方,我发现这很奇怪。我最后一部分同意你的看法。我可以写很多关于IE有多恐怖的页面,但不幸的是很多人使用它,所以需要使它成为可能。幸运的是,jQuery帮助我们了很多。 :-) – Andy0708