11 Luglio ’06 - Pubblicato in italiano il 4 Agosto 06

Ciao Ciao <Embed>

di Elizabeth Castro.

mani, hands

"Translated with the permission of A List Apart Magazine."

L’uso non standard, che Internet explorer fà del tag object ha obbligato, i browser compatibili, ad usare per incorporare filmati il tag embed. L’uso di embed è così diffuso che persino sul sito della apple è difficile trovare informazioni su come usare object in modi compatibili con gli standard.

Questo è andato avanti già per troppo tempo. Sperare che, <Embed>, diventi parte delle specifiche è come sperare che tuo marito (o il tuo patner) chiuda il dentifricio dopo aver lavato i denti. Non succederà mai ! E’ il momento di andare avanti, se vuoi che il tuo sito sia valido devi liberarti di embed. In questo articolo mostrerò come fare.

Filmati Online: I video di Google e YouTube

I lettori di "a list apart" ricorderanno l’articolo di Drew McLellan: Flash nel piatto. In questo articolo Drew descriveva un metodo per inserire animazioni flash in un documento, senza usare embed. Drew immaginava di usare un elemento object per richiamare flash, specificando il type adeguatamente. Poi attraverso una sorta di filmato di riferimento richiamava lo stream di Flash.

Ho ritrovato questo codice nei contenuti di Google Video e YouTube e son rimasta shockata dal fatto che Google Video suggerisca di usare soltanto il tag embed per inserire i filmati. Invece Alas, un mio amico, non era shockato da questi suggerimenti ma dal fatto che il tag embed continuasse a funzionare perfettamente su Internet Explorer che aveva smesso di supportarlo in favore del tag object che rende l’altro invisibile hai browser compatibili. Inoltre IE supporta embed soltanto se i visitatori hanno il Plugh-in appropriato già installato nelle loro macchine, altrimenti visualizza un errore generico e mostra l’icona rotta del player, senza dare nessun aiuto.
Il sito, YouTube, d’altra parte, ha un approccio duplice, utilizzando sia il tag object che embed.

Puoi usare il metodo di Drew per inserire filmati nelle tue pagine dato che ormai, sia Google che YouTube forniscono i video con il player Flash, indipendentemente del formato col quale li uploadi.

<object type="application/x-shockwave-flash"
data="http://video.google.com/googleplayer.swf?8755581808731033658"
width="400" height="326" id="VideoPlayback">
<param name="movie"
value="http://video.google.com/googleplayer.swf?docId=8755581808731033658" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />

<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>

Comunque, la cosa che mi dà fastidio non è l’inserimento di filmati con flash, lo conosco abbastanza, ma come vengono inseriti i filmati di QuickTime e Windows Media Player.

Eureka! un object per Windows Media Player

Son la prima a dire che è importante far attenzione agli errori; Soltanto dopo essermi accorta di aver sbagliato, e capisco il perché, posso immaginare nuovi modi per fare le cose. Così ricontrollando la tecnica, mi sono accorta che funziona bene con QuickTime ma non và bene per Windows Media Player e neanche su Opera per Windows. Ho cercato una soluzione e sono incappata nel MIME type che lascia usare il type: video/x-ms-wmx per l’object.

Per inserire un file Windows Media dovresti usare questo codice:

<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>

ma scoprirai che IE6 e IE7 e safari, anno tutti bisogno di un piccolo extra:

<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />

<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>

così funziona.

Personalmente credo che inserire video senza neanche un classid sia abbastanza sperimentale e quasi sacrilego ! Ho provato questo semplice esempio con IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, Safari e sembra funzioni proprio bene. (nota: naturalmente, ci sono molti altri param che puoi usare)

Inserire filmati QuickTime senza <embed>

Sfortunatamente, son molto abbastanza sicura che non ci sia nessun type che convinca Internet Explorer ad aprire un filmato QuickTIme senza un ActiveX control.

La scelta più ovvia, type="video/quicktime" e anche type="application/x-quicktime", funziona solo con i browser standard compatibili. Ma c’è una strada diversa.

Premesse basilari

Questa tecnica si base su un paio di premesse:

  • Primo, l’elemento object è stato progettato, dal W3C, per essere nidificato all’interno di altri elementi object, se un browser non riesce a visualizzare l’elemento più esterno proverà con il successivo e così via, quando ne troverà uno che è in grado di maneggiare si suppone ignori il resto.
  • Secondo, la maggior parte dei browser supporta pienamente l’elemento object. L’unica eccezione è Internet Explorer (sorpresa). IE6 mostra tutti gli elementi object che riesce a trattare, anche nidificati, ma, fà apparire degli elementi vuoti per quelli che non riesce a comprendere. IE7 non crea questi elementi vuoti, ma sfortunatamente non ama gli oggetti nidificati e dà un errore.
  • Terzo, Internet Explorer (anche la versione 7) implementa l’elemento object in maniera non standard e comprensibile solo a lui.

Penso che la risposta sia nella gestione di IE dei " commenti condizionali ". Ho sentito per la prima volta parlare, di questi commenti, quando la gente provava a trattare con i CSS e IE7.
La gestione tramite commenti specifici per IE è proprio quello che ci vuole.

Inserire filmati QuickTime per Internet Explorer

Useremo QuickTime in questo esempio ma puoi fare lo stesso per Windows Media Player, basta usare la giusta classid, come ti farò vedere subito dopo.

Per inserire in video QuickTime in Internet Explorer, useremo qualcosa del genere:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="256">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
</object>

Non dimenticare l’altezza (height) e la larghezza (width) e l’orrenda classid che chiama l’ActiveX control. Fai attenzione che il l’elemento param che specifica l’URI del video ha come attributo "src", non "url" o "movie".

Visualizzando il preview di quanto sopra. In IE, vedi un video, in altri browser vedrai una "cosa".

Inserire filmati QuickTime per tutti gli altri

Dato che i browser standard compatibili non possono trattare l’object che ha come classid un assurdo valure numerico al posto dell’URL, essi cercheranno di trovare un object annidato che abbia senzo.

Allora, useremo un’implementazione che segue gli standard proprio prima della chiusura col tag</object>.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="256">

<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<object type="video/quicktime"
data="http://www.sarahsnotecards.com/catalunyalive/diables.mov"
width="320" height="256">
<param name="autoplay" value="false" />
<param name="controller" value="true" />

</object>
</object>

Anche qui altezza e larghezza sono obbligatorie come anche il type.

Se vedi questo codice con un browser standard compatibile, si vede benissimo. Con IE6 e precedenti, come detto prima, non si sa bene cosa fare con il secondo </object> e in pratica vien creato un riquadro vuoto.

Se IE non lo può vedere, non lo può neanche incasinare

Visto che i commenti condizionali di IE son stati fatti con il discutibile proposito di fargli mangiare codice che gli altri browser non vedano, allora usiamoli. (E’ proprio uno schiaffo in faccia sentire Microsoft chiamare gli altri browser come "di secondo livello")

Le pagine contenenti commenti con la sintassi originale Microsoft non possono essere valicate, ma fortunatamente Lachlan Hunt a trovato un modo per sistemarli in modo che possano essere valicati.

Quindi dobbiam nascondere il secondo object ad IE con il suo sistema di commenti.
Inserisci <!--[if !IE]>--> di fronte al secondo <object> e, prima di chiudere il primo </object>, inserisci<!--<![endif]-->.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="260">
; <param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="http://www.sarahsnotecards.com/catalunyalive/diables.mov"
width="320" height="260">

<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>

Ora è stupendo !

Ma c’è di più, puoi usare l’intera raccolta di parametri disponibili per l’elemento object come descritto nel sito per gli sviluppatori della Apple.

La prossima volta userò un filmato di prova un po’ meno rude.

Dettagli per Windows Media Player

Se preferisci usare Windows Media Player con la classid il codice è di poco diverso. usa CODE. Per specificare l’URL del filmato usa un elemento param con attributo "url" per la maggior parte dei browser e con un attributo "src" per Safari.

Ecco un esempio.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
id="player" width="320" height="260">
<param name="url"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->

<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->

</object>

Sulle spalle di giganti

Oltre persone han tentato di risolvere il problema. Questo articolo è d’accordo che due object nidificati debbano funzionare e utilizza sofisticate tecniche CSS per nascondere il secondo object.

Ian Hickson ha usato i commenti di IE per nascondere gli object contenenti filmati flash

E Lachlan Hunt ci ha mostrato come scrivere, in modo valido, commenti che nascondano codice a IE rivelandolo al resto dei browser

Sull’Autore

Elizabeth Castro Elizabeth Castro sta lavorando alla sesta edizione del Best Seller:
HTML, xHTML, and CSS: Visual QuickStart Guide. Che dovrebbe uscire ad Agosto.
Vive in una fattoria con capre, galline, e conigli ma ha anche dei lama e pecore.
Il suo sito personale è Cookwood Press