Question

Google Chrome正在错误地显示Flash视频的z-index。

在Firefox或Internet Explorer中查看http://maxusglobal.com/。

现在在Chrome中查看它。

页面顶部的大视频应该有一个z-indexed顶部的“预览”图像。它适用于Firefox和Internet Explorer，但不支持Google Chrome。

这似乎不是WebKit，而是Chrome错误。

我已经尝试了所有的wmodes，（不透明，窗口和透明），但这并没有解决它。我还更改了Flash框的z-index，但它仍然无效。

Answer 1

将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。

我希望这有帮助！

Answer 2

我看到这里有几个选项：

选项1

使用wmode标记，您需要在渲染对象时设置它。稍后添加将无效(ref1) (ref2)

使用opaque应该允许您使用CSS z-index样式来定位对象。请注意，您应该在<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支持要求，您可能需要修改它。

这里提供的第三个链接是关于wmodes以及它们如何工作的相当好的文章 - 如果您决定使用选项1并遇到麻烦，我建议检查一下。

希望有所帮助！

Answer 3

使用Google Chrome 8时，我的嵌入式Flash对象的z-index也出现了问题。一切都在IE 7中完美运行.lnrbob用他的选项1解决方案击中了头部。我在<embed>标签中将wmode设置为不透明;但是我忽略了将wmode添加为<param>标签。在<param name="wmode" value="opaque"/>代码与<object>代码之间添加<embed>后，z-index开始在Chrome中完美运行而不会破坏IE。

Answer 4

它在Firefox 3.6和Opera 10中也不起作用，也在Windows中。

可能的解决方案：只需为您的CSS visibility:hidden;添加选择器#both_video_and_preview_image #video_wrapper。

然后添加jQuery代码（我看到您使用该库），因此当用户单击预览图像时，上面的选择器的可见性更改为可见。

$("#page_video_preview_image").click(function() {
    $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})

Answer 5

以下代码适用于，即firefox，opera，但不适用于chrome（版本21）

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>

<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>

Answer 6

您是否尝试过使用SWFObject并加载它？

谷歌Chrome，Flash和z-index行为错误

6 个答案: