Come posizionare il contenuto HTML sopra un filmato Flash?


9

Un sito su cui sto lavorando ha intestazioni Flash (utilizzando swfobject per incorporarle). Ora mi viene richiesto di codificare un po 'di HTML che dovrebbe sovrapporsi al film Flash.

Ho provato a impostare z-index sul contenitore dell'elemento Flash e sul div (in posizione assoluta) ma continua a "sparire" dietro il filmato Flash.

Spero in una soluzione CSS, ma se c'è un po 'di magia JS che farà il trucco, sono pronto.

Aggiornamento: Grazie, l'impostazione di wmode su "transparent" lo ha risolto per lo più. Solo Safari/Mac nascondeva ancora il div dietro il flash al primo show. Quando passavo a un'altra app, tornava davanti. Sono stato in grado di risolvere questo problema impostando gli stili iniziali del div a display: none; e renderlo visibile tramite JS mezzo secondo dopo che la pagina è stata caricata.

  0

Potrebbe mettere insieme un esempio di lavoro, perché io ho lo stesso problema e può Non farlo funzionare, sarebbe bello vedere se sono io o il mio browser .. 21 gen. 092009-01-21 16:31:57

20

Assicurarsi che il FlashVar "wmode" è impostato su "trasparente" o "opaco", ma non il default, "windowed" ... allora si dovrebbe essere in grado di usare i CSS z-index

+1

wmode è come un idolo d'oro sepolto nelle giungle più profonde del sud america. Ricordo che ero estatico la prima volta che ne sentivo parlare. 23 set. 082008-09-23 21:13:20

+1

Ricorda che non funziona con i browser Linux ad eccezione della versione beta di Flash 10 e dei browser più recenti (Fx 3.0.0+, Opera 9.50+, non so di altri) 24 set. 082008-09-24 05:46:37

+3

Quanti utenti Linux NON mantengono aggiornati i loro browser e programmi associati? Questo è un demografico esperto per definizione. 24 set. 082008-09-24 16:22:25

  0

Un certo sottoinsieme piuttosto ampio di utenti Linux esegue anche i plug-in del browser per l'eliminazione di flash/swf in linea di principio, quindi cerco di non preoccuparmi troppo di loro durante lo sviluppo.</semisnark> 29 set. 082008-09-29 15:12:51

  0

funziona davvero ... 25 feb. 152015-02-25 13:18:32


4

Follow- nota: come hai trovato nel tuo aggiornamento, visualizzare HTML in cima a Flash è al momento una proposta faticosa, e anche con la magia JS che hai trovato dovresti aspettarti che Flash blocchi il tuo codice HTML per alcuni spettatori che utilizzano i browser fuori , versioni precedenti e così via.

Se raggiungere un pubblico di navigazione arbitrariamente grande è importante per te (dispositivi mobili, ad esempio), riprogettare il tuo contenuto per evitare la sovrapposizione potrebbe farti venire il mal di testa a lungo termine.

  0

You Hai ragione, certo. In questo caso il cliente non si cura ma è un buon consiglio in generale. 24 set. 082008-09-24 11:00:21

  0

L'altra domanda in questo caso, tuttavia, è quanti dispositivi mobili supportano Flash? L'iPhone, sono sicuro, forse alcuni degli smartphone Windows Mobile, ma dopo? (Inoltre, non sono esperto di webdiv mobile, quindi non lo so ...) 24 set. 082008-09-24 16:21:36

  0

Steve: colpiscilo, invertilo! La maggior parte degli smartphone moderni supporta Flash, tranne l'iPhone, che non lo supporta. In particolare, i telefoni più moderni (ad esempio quelli con browser Web) hanno Flash Lite, in genere versione 2.xo 3.x. Flash Lite 2.x è più o meno simile a Flash 6 e Lite 3.x è simile a Flash 8. 25 set. 082008-09-25 03:21:44


0

Set questa variabile Flash come questo

s1.addParam("wmode","transparent"); 

poi nell'uso tag div questo stile

style="z-index:inherit; 

Il problema sarà risolto.


0

come Steve Paulo ha detto, poi viene la parte divertente quando il codice HTML che è seduto sulla cima del vostro flash sta chiamando più flash ...

Oh il divertimento che abbiamo avuto con quella, che ha coinvolto l'impostazione della z indice di essere effettivamente inferiore per tenere conto del flash pensando che sono le api ginocchia e quindi deve sempre essere in cima.


1

Vorrei aggiungere che è necessario ricordare di impostare i parametri WMODE ("trasparente") in entrambi i tag OBJECT e EMBED!

Segui il link per i dettagli: http://kb2.adobe.com/cps/142/tn_14201.html


1

utilizzare il codice nel seguente stile, funziona in Firefox e Chrome

<object id='myId' width='700' height='500'> 
      <param name='movie' value='images/ann/$imagename' /> 
      <param name='wmode' value='transparent' /> 
      <!--[if !IE]>--> 
      <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'> 
      <!--<![endif]--> 
      <div> 
       <h1>Please download flash player</h1> 
       <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p> 
      </div> 
      <!--[if !IE]>--> 
      </object> 
      <!--<![endif]--> 
     </object>