blocks|key|1420799|text|你试过使用SWFObject并像这样加载它吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420800|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Have you tried using SWFObject and loading it like that?

blocks|key|2207221|text|它在火狐3.6和Opera10上不能工作，同样在Windows上也是如此。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2207222|可能的解决方案:只需添加选择器#both_video_and_preview_image+#video_wrapper的CSS+visibility:hidden;即可。|offset|length|style|CODE|2207223|然后添加jQuery代码(我看到您使用了该库)，因此当用户单击预览图像时，上面选择器的可见性将更改为visible。|2207224|$("#page_video_preview_image").click(function()+{
++++$("#both_video_and_preview_image+#video_wrapper").css("visibility","visible");
})|code-block|syntax|javascript|2207225|entityMap^0|0|F|18|1S|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

It doesn't work in Firefox 3.6 and Opera 10, also in Windows.

Possible solution: Just add in your CSS <code>visibility:hidden;</code> for the selector <code>#both_video_and_preview_image #video_wrapper</code>.

Then add jQuery code (I see that you use the library), so when the user click the preview image then the visibility change for the above selector to visible.

<pre><code>$("#page_video_preview_image").click(function() {
 $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})
</code></pre>

blocks|key|139138|text|将wmode="transparent"添加到<embed>标记中。如下所示。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|139139|<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">|code-block|syntax|javascript|139140|如果不需要，则隐藏hello图像的div。|139141|我希望这对你有帮助！|BOLD|139142|entityMap^0|1|J|N|7|0|0|9|5|0|0|A|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@$9|11|A|12|B|O]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|Q|$]]

Add <code>wmode="transparent"</code> to your <code>&lt;embed&gt;</code> tag. Like the following.

<pre><code>&lt;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"&gt;
</code></pre>

And hide the div of the <code>hello</code> image if that is not necessary.

I hope this helps!

blocks|key|1420852|text|在我看来，这里有几个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420853|选项1|offset|length|style|BOLD|1420854|使用wmode标记，您需要在呈现对象时设置此标记。稍后添加将不起作用|1420855|(ref1)+(ref2)|1420856|使用opaque应该允许您以CSS+z索引样式为目标对象。请注意，应该在<embed>标记和param中设置此值|CODE|1420857|(ref3)+(ref4)|1420858|选项2|1420859|隐藏对象，直到用户单击您的预览按钮。在我注意到Sotiris说过同样的话之前，我花了很长时间才找到你使用的javascript。我相信这就是你的代码：|1420860|$('#play_video_box').click(function(){

if(app.isiPhone()+==+"iphone"+%7C%7C+app.isiPhone()+==+"ipad"){
return+true;
}

$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var+player+=+document.getElementById('player');
player.sendEvent('PLAY');
return+false;
});|code-block|syntax|javascript|1420861|我会将其中一行修改为：|1420862|$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});|1420863|并使用CSS将默认情况下的可见性设置为隐藏。根据您不支持javascript的要求，您可能需要修改它。|1420864|这里提供的第三个链接是一篇关于wmode及其工作原理的很好的文章-如果您决定使用选项1并遇到麻烦，我建议您查看该文章。|1420865|希望这能有所帮助！|1420866|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3923996/chrome-specific-issue-with-z-index-and-flash|1|https://stackoverflow.com/questions/886864/differences-between-using-wmodetransparent-opaque-window-for-an-embedded|2|http://www.communitymx.com/content/source/E5141/wmodeopaque.htm|3|https://stackoverflow.com/questions/2129122/how-to-enable-html-content-on-top-of-flash-content-without-using-the-transparent^0|0|0|3|0|0|0|6|0|7|6|1|0|10|7|1A|5|0|0|6|2|7|6|3|0|0|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1O|8|@$D|1P|E|1Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]|$D|1W|E|1X|1|1Y]]|A|$]]|$1|L|3|M|5|6|7|1Z|8|@$D|20|E|21|F|N]|$D|22|E|23|F|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|24|8|@]|9|@$D|25|E|26|1|27]|$D|28|E|29|1|2A]]|A|$]]|$1|Q|3|R|5|6|7|2B|8|@$D|2C|E|2D|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|2E|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|2F|8|@]|9|@]|A|$X|Y]]|$1|Z|3|10|5|6|7|2G|8|@]|9|@]|A|$]]|$1|11|3|12|5|W|7|2H|8|@]|9|@]|A|$X|Y]]|$1|13|3|14|5|6|7|2I|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2J|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2K|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]|1J|$5|1C|1D|1E|A|$1F|1K]]|1L|$5|1C|1D|1E|A|$1F|1M]]]]

There are a couple of options here as I see them:

Option 1

Use the wmode tag and you need to set this as the object is rendered. Adding it later will not work <a href="https://stackoverflow.com/questions/3923996/chrome-specific-issue-with-z-index-and-flash">(ref1)</a> <a href="https://stackoverflow.com/questions/886864/differences-between-using-wmodetransparent-opaque-window-for-an-embedded">(ref2)</a>

Using opaque should allow you to target the object with CSS z-index styles. Be aware that you should set this value in the <code>&lt;embed&gt;</code> tag as well as as a <code>param</code> <a href="http://www.communitymx.com/content/source/E5141/wmodeopaque.htm" rel="nofollow noreferrer">(ref3)</a> <a href="https://stackoverflow.com/questions/2129122/how-to-enable-html-content-on-top-of-flash-content-without-using-the-transparent">(ref4)</a>

Option 2

Hide the object until a user has clicked on your preview button. I spent ages tracking down the javascript that you used before I noticed that Sotiris had said the same thing. I believe this is your code here:

<pre><code>$('#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;
});
</code></pre>

I would amend one line to:

<pre><code>$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});
</code></pre>

And use CSS to set visibility to hidden by default. Depending on your no javascript support requirements you may need to modify that.

The third link provided here is a rather good article on wmodes and how they work - I recommend checking that out if you decide to go with option 1 and run into trouble.

Hope that helps!

blocks|key|2207349|text|在使用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。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2207350|entityMap^0|2E|7|3I|7|3W|8|47|7|4L|10|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

I too was having a problem with the z-index of embedded Flash objects when using Google Chrome 8. Everything worked perfectly in IE 7. lnrbob hit the nail on the head with his option 1 solution. I had set wmode to opaque in the <code>&lt;embed&gt;</code> tag; but I neglected to add wmode as a <code>&lt;param&gt;</code> tag. Once I added <code>&lt;param name="wmode" value="opaque"/&gt;</code> between the <code>&lt;object&gt;</code> tag and the <code>&lt;embed&gt;</code> tag, the z-index started to work perfectly in Chrome without breaking IE.

blocks|key|139277|text|下面的代码可以在ie，firefox，opera中运行，但不能在chrome(版本21)上运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139278|<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>|code-block|syntax|javascript|139279|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

the following code works in ie,firefox,opera, but not worked on chrome(version 21)

<pre><code>&lt;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"&gt;
&lt;param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf"&gt;
&lt;param name="quality" value="high"&gt;&lt;/param&gt;
&lt;param name="wmode" value="opaque"&gt;&lt;/param&gt;
&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;
&lt;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"&gt;&lt;/embed&gt;
&lt;/object&gt;

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

Google Chrome is displaying the z-index of a Flash video incorrectly.

Take a look at <a href="http://maxusglobal.com/" rel="noreferrer">http://maxusglobal.com/</a> in Firefox or Internet Explorer.

Now take a look at it in Chrome.

The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.

This doesn't seem to be a <a href="http://en.wikipedia.org/wiki/WebKit" rel="noreferrer">WebKit</a> thing, but specifically a Chrome bug.

I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.

Google Chrome, Flash and z-index wrong behaviour

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Google Chrome错误地显示Flash视频的z索引。看看Firefox或Internet Explorer中的。现在让我们在Chrome中看看它。页面顶部的大视频应该在其顶部有一个z索引的“预览”图像。在Firefox和Internet Explorer中可以，但在Google Chrome中不能。这似乎不是的...

问Google Chrome、Flash和z索引错误行为
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google Chrome、Flash和z索引错误行为EN