Google Chrome错误地显示Flash视频的z索引。
看看Firefox或Internet Explorer中的http://maxusglobal.com/。
现在让我们在Chrome中看看它。
页面顶部的大视频应该在其顶部有一个z索引的“预览”图像。在Firefox和Internet Explorer中可以,但在Google Chrome中不能。
这似乎不是WebKit的问题,而是一个明确的Chrome bug。
我已经尝试了所有的wmode,(不透明,窗口和透明),但这不能解决它。我还更改了Flash box的z索引,但它仍然不起作用。
发布于 2010-12-08 15:36:15
将wmode="transparent"添加到<embed>标记中。如下所示。
<embed wmode="transparent"
height="314" width="516"
type="application/x-shockwave-flash"
id="player"
name="page_player"
src="/swfs/player.swf"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=/attachments/files/u_t_o_N_1.mp4">如果不需要,则隐藏hello图像的div。
我希望这对你有帮助!
发布于 2010-12-08 16:24:37
在我看来,这里有几个选项:
选项1
使用wmode标记,您需要在呈现对象时设置此标记。稍后添加将不起作用
使用opaque应该允许您以CSS z索引样式为目标对象。请注意,应该在<embed>标记和param中设置此值
(ref3) (ref4)
选项2
隐藏对象,直到用户单击您的预览按钮。在我注意到Sotiris说过同样的话之前,我花了很长时间才找到你使用的javascript。我相信这就是你的代码:
$('#play_video_box').click(function(){
if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}
$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});我会将其中一行修改为:
$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});并使用CSS将默认情况下的可见性设置为隐藏。根据您不支持javascript的要求,您可能需要修改它。
这里提供的第三个链接是一篇关于wmode及其工作原理的很好的文章-如果您决定使用选项1并遇到麻烦,我建议您查看该文章。
希望这能有所帮助!
发布于 2011-01-26 04:02:55
在使用Google Chrome 8时,我也遇到了嵌入式Flash对象的z索引的问题。在IE7中,一切都工作得很好。lnrbob用他的option 1解决方案一针见血。我在<embed>标记中将wmode设置为opaque;但是我忘记添加wmode作为<param>标记。一旦我在<object>标签和<embed>标签之间添加了<param name="wmode" value="opaque"/>,z-index就开始在Chrome中正常工作,而不会破坏IE。
https://stackoverflow.com/questions/4313364
复制相似问题