Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Inserire un video con codice validato senza Javascript

Inserire un video con codice validato senza Javascript


La soluzione in attesa di HTML5

Questo approccio prevede, oltre ai già citati commenti condizionali negativi, l'utilizzo del solo tag object per mostrare i video su tutti i browser.
Tempo fa si utilizzava una soluzione con il tag embed: crossbrowser ma non standard (e quindi non validata XHTML).

Come già detto Internet Explorer interpreta correttamente l'object standard solo se il plugin Flash è già installato sul client. Per questo motivo, solo per il prodotto di casa Microsoft, è necessario utilizzare un tag con una sintassi specifica che però, in caso di mancanza del plugin, è in grado di attivare la procedura per l'installazione automatica dei componenti.
Questo codice atipico non è interpretato da altre piattaforme.

Per la piena compatibilità, quindi, si rende necessario “innestare” – all'interno del primo – un secondo tag object con sintassi standard. Attraverso i commenti condizionali negativi faremo in modo che Explorer interpreti il blocco di codice adatto.

Attenzione! In teoria potremmo innestare un tag dentro l'altro senza commenti condizionali ma a causa di un bug, risolto con la versione 7, IE farebbe vedere un rettangolo vuoto sul secondo elemento.

L'object specifico per IE deve contenere gli attributi classid e codebase (utile per suggerire l'URL del componente e l'eventuale versione specifica).

Ecco come impostare correttamente il tag object per Explorer:

1
2
3
4
5
6
7
8
<!-- IE only -->
<object id="myvideo" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" title="Video di prova" width="400" height="315">
	<param name="movie" value="player/player.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="file=video.flv&image=img/preview.jpg" />
	<param name="wmode" value="transparent" />
</object>

Il codice appena visto non viene interpretato dai browser diversi da IE. Quello che segue invece sì:

1
2
3
4
5
6
<object id="myvideo" type="application/x-shockwave-flash" data="player/player.swf" title="Video di prova" width="400" height="315">
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="file=video.flv&image=img/preview.jpg" />
	<param name="wmode" value="transparent" />
</object>

Come innestare un tag dentro l'altro in maniera che IE interpreti solo il primo mentre gli altri browser solo il secondo? Con i commenti condizionali negativi, appunto.

Nello specifico i navigatori diversi da IE leggono tutti e due i tag object ma interpretano e mostrano solo il secondo. Primo problema risolto.
Purtroppo anche Explorer potrebbe sovrascrivere il primo con il secondo, con tutte le difficoltà già viste in caso di mancanza del plugin adatto.
Per questo motivo, attraverso i tag condizionali, facciamo in modo che IE ignori del tutto l'object valido per gli altri browser.

Il fulcro di questa tecnica, quindi, è rappresentato dal particolare modo in cui vengono scritti i tag condizionali:

1
2
3
<!--[if !IE]><!-->
... CODICE NON INTERPRETATO DA IE MA SOLO DAGLI ALTRI BROWSER...
<!--<![endif]-->

Per comprendere il motivo per cui si utilizza questa sintassi è necessaria una breve analisi dei tag condizionali negativi. Si vedano gli esempi successivi.

Commento condizionale negativo standard ma non validato

1
2
3
<![if !IE]>
BLABLA
<![endif]>

Explorer, correttamente, ignora il contenuto. Gli altri browser, correttamente, leggono il contenuto. Il codice non viene validato.

Commento condizionale negativo validato ma non funzionante su browser diversi da ie

1
2
3
<!--[if !IE]>
BLABLA
<![endif]-->

Explorer, correttamente, ignora il contenuto. Gli altri browser vedono il contenuto come un commento html e non lo visualizzano. Il codice viene validato.

Commento condizionale validato con hack e compatibile con tutti i browser

1
2
3
<!--[if !IE]><!-->
BLABLA
<!--<![endif]-->

Explorer, correttamente, ignora il contenuto. Gli altri browser, correttamente, leggono il contenuto. Il codice è validato xhtml strict.

Si può notare come sia stato aggiunto il codice di chiusura del commento dopo l'apertura e la chiusura del tag condizionale. In questa maniera IE interpreta correttamente la condizione negativa ed ignora il codice all'interno del blocco.
Gli altri browser, invece, vedono i tag condizionali come semplici commenti ma possono interpretare il markup racchiuso tra essi.

Pagina: 1 2 [3] 4 5

link sponsorizzati

Consiglialo su Facebook

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,775 secondi dopo aver eseguito ben 47 query. Wordpress... prestazioni da urlo!