1. Inicio
  2. Pregunta y respuesta
  3. Comportamiento incorrecto de Google Chrome, Flash y z-index

Comportamiento incorrecto de Google Chrome, Flash y z-index

2010-11-30 12 views
11

Google Chrome muestra incorrectamente el índice z de un video Flash.Comportamiento incorrecto de Google Chrome, Flash y z-index

Eche un vistazo a http://maxusglobal.com/ en Firefox o Internet Explorer.

Ahora échele un vistazo en Chrome.

El gran video en la parte superior de la página debe tener una imagen de "vista previa" indexada z sobre la parte superior. Lo hace en Firefox e Internet Explorer, pero no en Google Chrome.

Esto no parece ser una cosa WebKit, sino específicamente un error de Chrome.

He intentado todos los wmodes, (opaco, ventana y transparente), pero esto no lo arregla. También cambié el índice Z del cuadro de Flash, pero todavía no funciona.

Fuente

2010-11-30 Smickie

+0

Sin un vínculo, o el marcado completo, todo lo que digamos es sólo una suposición. – Rob

+0

Hay un enlace allí ... – Smickie

+0

en qué versión de Firefox está revisando? Comprobé que funciona bien en IE pero no puedo ver la imagen de vista previa en FF y Chrome. –

Respuesta

28

Añadir wmode="transparent" a su etiqueta <embed>. Como el siguiente.

<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">

y ocultar el div de la imagen de hello si eso no es necesario.

Espero que esto ayude!

Fuente

2010-12-08 07:36:15

+1

que 'wmode = "transparent"' hará el truco =) – Singleton

+4

Establecer wmode = "opaque" también funcionará. Además, si usa , solo agréguelo como tanto en el interior como en el exterior . –

+1

Esta solución no funciona en Chrome 19.0.1084.52 m, Safari 5.1.7, pero funciona en IE9. – Paul

-1

¿Ha intentado utilizar SWFObject y cargarlo así?

Fuente

2010-11-30 21:04:38 adamzwakk

+0

Sí, eso no ayudó. – Smickie

0

No funciona en Firefox 3.6 y Opera 10, también en Windows.

Solución posible: simplemente agregue su CSS visibility:hidden; para el selector #both_video_and_preview_image #video_wrapper.

Luego, agregue el código jQuery (veo que usa la biblioteca), de modo que cuando el usuario haga clic en la imagen de vista previa, el cambio de visibilidad para el selector anterior sea visible.

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

Fuente

2010-12-06 14:48:41 Sotiris

5

Hay un par de opciones aquí como los veo:

Opción 1

utilizar la etiqueta embed y hay que establecer esto como el objeto se representa. Agregarlo más tarde no funcionará
(ref1)(ref2)

El uso de opaque debería permitirle orientar el objeto con estilos CSS z-index. Tenga en cuenta que debe establecer este valor en la etiqueta, así como <embed> como una opción param
(ref3)(ref4)

ocultar el objeto hasta que un usuario ha hecho clic en el botón de vista previa. Pasé siglos rastreando el javascript que usaste antes de notar que Sotiris había dicho lo mismo.Creo que este es el código aquí:

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

Me modificar una línea a:

$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});

Y el uso de CSS para definir la visibilidad a ocultados. Dependiendo de sus requisitos de compatibilidad con JavaScript, puede que necesite modificar eso.

El tercer enlace provisto aquí es un artículo bastante bueno sobre wmodes y cómo funcionan - Recomiendo verificarlo si decides ir con la opción 1 y tener problemas.

Espero que ayude!

Fuente

2010-12-08 08:24:36 lnrbob

+0

Vale la pena volver a enfatizar su primer punto: agregar wmode una vez que se haya renderizado el objeto no funcionará. Tienes que atraparlo de antemano. Así que no hay forma de meterse con él en Firebug y tus amigos te llevarán a ningún lado. – ksenzee

2

Yo también estaba teniendo un problema con el índice Z de objetos Flash incrustados al usar Google Chrome 8. Todo funcionó perfectamente en IE 7. lnrbob dio en el clavo con su solución de opción 1. Puse wmode en opaco en la etiqueta <embed>; pero olvidé agregar wmode como una etiqueta <param>. Una vez que agregué <param name="wmode" value="opaque"/> entre la etiqueta <object> y la etiqueta <embed>, el índice z comenzó a funcionar perfectamente en Chrome sin romper IE.

Fuente

2011-01-25 20:02:55 mongo

0

el siguiente código funciona en IE, Firefox, Opera, pero no trabajó en el cromo (versión 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>

Fuente

2012-08-30 03:49:15 jiucai

+1

div add position: relative funcionará en cromo. – jiucai

Cuestiones relacionadas

 Cuestiones relacionadas