Addio Embed

Questa è la traduzione dell'articolo Bye Bye Embed di Elizabeth Castro, pubblicato originariamente su A List Apart l'11 luglio 2006. La traduzione viene qui presentata con il consenso dell'editore (A Lista Apart Magazine) e dell'autrice.

Mi ha sempre irritato il fatto che l'uso non standard del tag object da parte di Internet Explorer abbia costretto ad utilizzare il tag non standard embed per inserire filmati nella pagina anche sui browser che agli standard aderiscono. Persino sul sito di Apple il tag embed (un'estensione creata da Netscape, ricordiamolo) è così ampiamente usato che è difficile trovare traccia dell'elemento object nell'inserimento di filmati QuickTime, se non in modi non aderenti agli standard.

L'uso del tag embed dura da fin troppo tempo. Desiderare che divenga parte della specifica ufficiale è come desiderare che il tuo partner inizi a mettere il coperchio sul tubetto del dentifricio dopo averlo usato: non avverrà mai. Ma è comunque tempo di muoversi. Se vogliamo che il nostro sito sia valido dobbiamo semplicemente liberarci del tag embed. In questo articolo mostrerò come.

Filmati online: Google Video e YouTube

I lettori di A List Apart ricorderanno l'articolo di Drew McLellan su Flash Satay. In quell'articolo Drew ha descritto un metodo per inserire animazioni Flash in una pagina senza ricorrere al tag embed. Flash satay consiste di due parti. Nella prima Drew spiegava come sia possibile usare un singolo elemento object per i contenuti Flash, a patto di specificare nel modo corretto l'attributo type. Nella seconda dimostrava come, per riprodurre correttamente un filmato Flash, fosse necessario incorporare una sorta di filmato di riferimento e di appoggio.

Ho fatto degli esperimenti con il codice di Drew su contenuti provenienti da Google Video e YouTube. Sono rimasta più che sorpresa quando ho visto che Google Video suggerisce di usare solo il tag embed per incorporare i suoi video in una pagina web. Ragazzi, non mi ha sorpreso che suggerissero una cosa del genere. Mi ha sorpreso il constatare che quel metodo funziona anche su Internet Explorer, che da anni ha smesso di supportare il tag non standard ma universalmente supportato embed a favore di un'implementazione proprietaria del tag object, un'implementazione che rende il contenuto inserito in quel modo del tutto invisibile sui browser che seguono gli standard. Di fatto Internet Explorer supporta il tag embed se il visitatore ha già installato il player appropriato. Se il player non è installato, gli utenti ricevono un messaggio di errore sotto forma di un'icona che indica l'assenza del plugin. Non ricevono però nessun aiuto. YouTube, da parte sua, offre il classico metodo (non standard, ovviamente) che consiste nell'uso simultaneo dei tag embed e object.

Dal momento che Google Video e YouTube distribuiscono i filmati attraverso il Flash Player, a prescindere quindi dal formato in cui sono stati uploadati sui loro server, si può usare il metodo di Drew McLellan per inserire questi filmati nelle nostre pagine. In effetti, non è nemmeno necessaria la parte Satay del suo codice. I filmati di Google Video e YouTube vengono riprodotti anche senza il movie di appoggio cui accennavamo e che lui suggerisce di usare (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):

La mia irritazione comunque non è per i movie Flash (con cui, tra l'altro, ho poca dimestichezza), ma per quelli QuickTime e Windows Media. Ho provato per anni a inserirli seguendo gli standard, ma senza molta fortuna. Recentemente, però, ho scoperto che c'è un tipo MIME che consente di usare un solo elemento object per i video Windows Media (.wmv). Quasi non ci credevo.

Eureka! Un solo object per Windows Media Player

Credo fermamente che bisogna prestare attenzione agli errori. È solo quando mi accorgo di aver sbagliato qualcosa, e capisco perché, che sono in grado di trovare nuovi modi per fare le cose nel modo giusto.

Mentre rivedevo la tecnica, ho notato che, sebbene funzionasse bene con i filmati QuickTime (come vedremo dopo), non funzionava per i filmati Windows Media su Opera per Windows. Ho trattenuto la tentazione di ignorare il problema, e mentre cercavo una soluzione, mi sono imbattuta nel tipo MIME che ci consentirà di usare un solo elemento object per incorporare filmati Windows Media. Si tratta di video/x-ms-wmv.

Per inserire un file Windows Media, dunque, si può usare questo codice (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):

Si scopre subito, però, che IE6, IE7 e Safari hanno bisogno di un piccolo aiuto, sotto forma di un parametro (param) aggiuntivo:

Così funziona.

Personalmente considero una cosa del genere sperimentale, quasi sacrilega... incorporare un filmato Windows Media senza classid! (Cosa viene dopo? Documenti validi senza DOCTYPE?).

Ho testato questo semplice esempio su IE5.5, IE6, IE7, Opera su Windows e Mac, Firefox su Windows e Mac, Safari: funziona bene. Ciò detto, non mi occupo a tempo pieno di linguaggi di scripting o di cose che riguardano Microsoft, così il vostro contributo alla personalizzazione del codice può intervenire. (Nota a margine: ci sono per esempio molti altri parametri che è possibile inserire a vostro piacimento).

Incorporare filmati QuickTime senza embed

Purtroppo, credo che non esista un tipo MIME in grado di convincere Internet Explorer ad aprire un filmato QuickTime senza un controllo ActiveX. Le scelte ovvie, type="video/quicktime" o anche type="application/x-quicktime", funzionano solo sui browser aderenti agli standard. Così ho provato a seguire un'altra strada.

Premesse

La tecnica è basata su alcune premesse:

• Prima. L'elemento object è concepito per essere annidato in modo da aiutare i browser a degradare continuando a presentare il contenuto al vsitatore. Se un browser non è in grado di mostrare l'object più esterno, dovrebbe provare quello successivo e poi, eventualmente, quello ancora successivo, fin quando non ne trova uno in grado di gestire un certo formato. Una volta che trovi un object che può gestire, si suppone che ignori gli altri.
• Seconda. La maggior parte dei browser più diffusi supportano l'elemento object. La grande eccezione è Internet Explorer. IE6 visualizza tutti gli elementi object che è in grado di gestire, anche se sono annidati. La conseguenza sono improvvise e deleterie apparizioni, come fantasmi, di quelli che non supporta. Per fortuna IE7 ha smesso giocare con i fantasmi, ma sfortunatamente non privilegia gli oggetti annidati se ci sono problemi con quelli esterni. Dà un errore.
• Terza. Internet Explorer (compresa la versione 7) supporta l'elemento object in un modo non standard, propriaterio, che di fatto taglia fuori gli altri browser (che infatti non lo supportano).

Credo che la riposta si possa trovare nell'uso dei commenti condizionali. Ne ho sentito parlare per la prima volta da quanti si apprestavano a decidere come gestire il supporto dei CSS su IE7. E se è specifico di Internet Explorer (leggi: proprietario) l'uso dei commenti condizionali, così lo è l'uso non standard dell'elemento object. Un incontro perfetto, insomma.

Incorporare QuickTime per Internet Explorer

Userò QuickTime per il mio esempio, ma si può usare la stessa tecnica per filmati Windows Media con l'attributo classid, come mostrerò tra poco.

Per inserire un filmato QuickTime di base in Internet Explorer, useremo qualcosa di simile (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »)

Non dimenticate di specificare gli attributi height e width, o l'orrendo classid che richiama il controllo ActiveX per i filmati QuickTime. Notate pure che l'elemento param che specifica l'URI del filmato ha un attributo name con il valore "src", non "url" o "movie".

Potete vedere un'anteprima qui. In Internet Explorer vedrete il filmato, negli altri browser non vedrete niente.

Incorporare QuickTime per tutti gli altri browser

Sebbene i browser aderenti agli standard non siano in grado di gestire quel tipo di object a causa dell'attributo classid che ha come valore un numero e non un URL, essi cercheranno comunque di vedere se ci sono altri object annidati che possono gestire.

Così, prima di chiudere il tag </object>, useremo un'implementazione standard dell'elemento object (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):

L'uso di width e height è obbligatorio, così come la specifica di type.

Se ora osservate questa combinazione in un browser standard-compliant, vi sembrerà tutto splendido. IE6 (e versioni precedenti), come accennavamo prima, non sa come comportarsi con il secondo object e di solito genera l'apparizione da fantasma di cui si parlava.

Quello che IE non vede non può rovinarlo

Sebbene i commenti condizionali siano stati concepiti con lo scopo discutibile di servire un codice speciale a IE che rimane nascosto agli altri browser, noi lo useremo qui per nascondere una parte di codice a IE ma non agli altri browser.

I commenti scritti con la sintassi originale di Microsoft non validano (sorpresa?), ma per fortuna Lachlan Hunt ha trovato un modo per renderli validi.

Dunque, abbiamo bisogno di nascondere il secondo object a Internet Explorer usando il suo sistema di commenti condizionali. Inseriamo <!--[if !IE]>--> prima del secondo tag <object> e <!--<![endif]--> giusto dopo il primo tag di chiusura </object> (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):

Ora sì che è tutto bellissimo!

Inoltre, è possibile usare l'intera gamma di parametri con l'elemento object, così come è specificato sul sito per gli sviluppatori di Apple.

La prossima volta lo testerò con un filmato un po' meno rauco.

I dettagli per Windows Media Player

Se si preferisce inserire filmati e file Windows Media Player con il classid e non con il metodo dell'object singolo che ho dimostrato all'inizio dell'articolo, il codice è solo leggermente differente. Per il classid nel primo object useremo classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6". Per specificare l'URL del filmato Windows Media, useremo invece un elemento param con un attributo name uguale a "url", ripetendo il valore e facendo uso un attributo name uguale a "src" per Safari.

Poi, nel secondo object, quello aderente agli standard, useremo lo stesso codice visto nel metodo dell'unico, singolo object.

Ecco un esempio (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):

Un problemino, ovvero 'Cosa rimane da fare'

Nel gennaio del 2006 Apple ha iniziato a promuovere l'uso di Javascript per l'inserimento di filmati in pagine web in modo tale che gli utenti non avrebbero dovuto cliccare su un controllo ActiveX per attivarlo. È una storia lunga e un po' confusa, iniziata con una causa intentata a Microsoft e che ha avuto come esito quello di complicare la vita noi utenti. Ad ogni modo, i metodi descritti in questo articolo funzionano quasi perfettamente senza dover ricorrere a Javascript. Attenzione su un punto però: i filmati QuickTime non si avviano automaticamente su IE. In effetti trovo molto sospetto il fatto che i file Windows Media vengano caricati nella cache e partano automaticamente senza nessuna interazione da parte dell'utente mentre i filmati QuickTime mostrano solo il frame iniziale: l'audio scorre ma non si vedono immagini in movimento.

Ad ogni modo, prima di implementare sul mio sito una laboriosa soluzione basata su Javascript, voglio vedere come va a finire la questione relativa all'attivazione dei controlli ActiveX. Io di Javascript ne uso poco e vorrei continuare a farlo.

Se voi opterete per la soluzione basata su Javascript o meno, è comunque irrilevante nel contesto di questo articolo. In entrambi i casi potrete evitare l'uso del tag embed a favore dell'elemento standard object.

Avrei anche voluto trovare un modo per nascondere gli object interni solo a IE6 e versioni precedenti, dal momento che IE7 sembra gestire correttamente gli elementi object annidati. Non ci sono riuscita. C'è un commento condizionale consentirebbe di ottenere questo risultato (<!--[if gte IE 7]>-->), ma i caratteri extra (-->) che rendono possibile la validazione del codice vengono visualizzati su IE7. Idee al riguardo?

Sulle spalle del gigante

Altre persone si sono occupate di questo problema. Questo articolo specifica che il metodo dei due object annidati funziona, ma a mio parere usa in modo complicato i CSS per nascondere il secondo oggetto.

Ian Hickson ha usato i commenti condizionali di IE per nascondere allo stesso IE un secondo object con contenuto Flash.

E il citato Lachlan Hunt ha spiegato come scrivere commenti condizionali che nascondono contenuto ad IE mostrandolo invece agli altri browser.