1. Zuhause
  2. Frage und Antwort
  3. Google Chrome, Flash und Z-Index falsches Verhalten

Google Chrome, Flash und Z-Index falsches Verhalten

2010-11-30 5 views
11

Google Chrome zeigt den Z-Index eines Flash-Videos falsch an.Google Chrome, Flash und Z-Index falsches Verhalten

Werfen Sie einen Blick auf http://maxusglobal.com/ in Firefox oder Internet Explorer.

Werfen Sie jetzt einen Blick in Chrome.

Das große Video oben auf der Seite sollte ein "Vorschau" -Bild haben, das oben z-indexiert ist. Es funktioniert in Firefox und Internet Explorer, aber nicht in Google Chrome.

Dies scheint keine WebKit Sache zu sein, sondern speziell ein Chrome-Bug.

Ich habe alle wmodes versucht (undurchsichtig, Fenster und transparent), aber das behebt es nicht. Ich habe auch den Z-Index der Flash-Box geändert, aber es funktioniert immer noch nicht.

Quelle

2010-11-30 Smickie

+0

Ohne einen Link oder das komplette Markup, alles, was wir sagen, ist nur eine wilde Vermutung. – Rob

+0

Da ist ein Link drin ... – Smickie

+0

In welcher Firefox-Version suchen Sie? Ich habe überprüft, ob es im IE funktioniert, aber ich kann das Vorschaubild in FF und Chrome nicht sehen. –

Antwort

28

wmode="transparent" zu Ihrem <embed> Tag hinzufügen. Wie das Folgende.

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

Und das div des hello Bild verstecken, wenn das nicht notwendig ist.

Ich hoffe, das hilft!

Quelle

2010-12-08 07:36:15

+1

dass 'wmode = "transparent"' wird den Trick tun =) – Singleton

+4

Einstellung wmode = "opaque" wird auch funktionieren. Wenn Sie verwenden, fügen Sie es einfach als . –

+1

Diese Lösung funktioniert nicht in Chrome 19.0.1084.52 m, Safari 5.1.7, funktioniert aber in IE9. – Paul

-1

Haben Sie versucht, SWFObject zu verwenden und es so zu laden?

Quelle

2010-11-30 21:04:38 adamzwakk

+0

Yup, das hat nicht geholfen. – Smickie

0

Es funktioniert nicht in Firefox 3.6 und Opera 10, auch in Windows.

Mögliche Lösung: Fügen Sie einfach in Ihrem CSS visibility:hidden; für den Selektor #both_video_and_preview_image #video_wrapper hinzu.

Fügen Sie dann jQuery-Code hinzu (ich sehe, dass Sie die Bibliothek verwenden). Wenn der Benutzer auf das Vorschaubild klickt, ändert sich die Sichtbarkeit für den obigen Selektor in visible.

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

Quelle

2010-12-06 14:48:41 Sotiris

5

Es gibt ein paar Optionen hier wie ich sie sehe:

Option 1

den Wmode-Tag verwenden und Sie müssen diese Einstellung vornehmen, wenn das Objekt gerendert wird. Späteres Hinzufügen wird nicht funktionieren
(ref1)(ref2)

Mit opaque sollte es möglich sein, das Objekt mit CSS-Z-Index-Stilen zu targetieren. Beachten Sie, dass Sie diesen Wert in dem <embed> Tag setzen sollen sowie als param
(ref3)(ref4)

Option 2

das Objekt ausblenden, bis ein Benutzer auf Ihrem Vorschau-Knopf geklickt hat. Ich habe ewig damit verbracht, das Javascript zu finden, das du benutzt hast, bevor ich bemerkt habe, dass Sotiris dasselbe gesagt hat.Ich glaube, dieser Code ist hier:

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

Ich würde eine Zeile ändern:

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

Und CSS Sichtbarkeit auf standardmäßig ausgeblendet. Abhängig von Ihren Anforderungen an die JavaScript-Unterstützung müssen Sie möglicherweise das ändern.

Der dritte Link, der hier bereitgestellt wird, ist ein ziemlich guter Artikel über wmodes und wie sie funktionieren - ich empfehle das zu überprüfen, wenn Sie sich für Option 1 entscheiden und Probleme bekommen.

Hoffe, dass hilft!

Quelle

2010-12-08 08:24:36 lnrbob

+0

Ihr erster Punkt ist es wert, erneut zu emphasieren: das Hinzufügen von wmode nach dem Rendern des Objekts funktioniert nicht. Du musst es vorher fangen. Also keine Menge damit in Firebug und Kin wird Sie überall bringen. – ksenzee

2

Ich hatte auch ein Problem mit dem Z-Index von eingebetteten Flash-Objekten bei der Verwendung von Google Chrome 8. Alles funktionierte perfekt in IE 7. lnrbob traf den Nagel auf den Kopf mit seiner Option 1 Lösung. Ich hatte wmode auf undurchsichtig in der <embed> Marke eingestellt; aber ich habe es versäumt, wmode als <param> tag hinzuzufügen. Sobald ich <param name="wmode" value="opaque"/> zwischen dem <object> Tag und dem <embed> Tag hinzugefügt habe, begann der Z-Index perfekt in Chrome zu funktionieren, ohne IE zu brechen.

Quelle

2011-01-25 20:02:55 mongo

0

der folgende Code funktioniert in IE, Firefox, Oper, aber nicht bearbeitet Chrom (Version 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>

Quelle

2012-08-30 03:49:15 jiucai

+1

div Position hinzufügen: Relativ funktioniert am Chrom. – jiucai

Verwandte Themen

 Verwandte Themen