Bye Bye Embed - Webaccessibile.org

Traduzione dell’articolo Bye Bye Embed di Elizabeth Castro, pubblicato in data 11 luglio 2006 nel sito alistapart.com URL articolo originale: http://alistapart.com/articles/byebyeembed Translated with the permission of A List Apart Magazine and the author. Mi ha sempre infastidito che l’uso non standard dell’elemento Object, da parte di Internet Explorer, abbia spinto gli amanti dei browser che rispettano […]

Traduzione dell’articolo Bye Bye Embed di Elizabeth Castro, pubblicato in data 11 luglio 2006 nel sito alistapart.com

URL articolo originale:
http://alistapart.com/articles/byebyeembed

Translated with the permission of A List Apart Magazine and the author.

Mi ha sempre infastidito che l’uso non standard dell’elemento Object, da parte di Internet Explorer, abbia spinto gli amanti dei browser che rispettano gli standard a utilizzare l’elemento deprecato Embed per integrare filmati nelle pagine Web.
Anche nel sito apple.com l’elemento Embed – una estensione di Netscape, che diamine! [“for Pete’s sake”, espressione idiomatica n.d.t.] – è di uso così comune che è assai arduo trovare informazioni sull’uso corretto dell’elemento Object per QuickTime, con l’eccezione delle modalità non standard.

L’uso di Embed è durato fin troppo. Sperare che entri a far parte delle specifiche è come desiderare che il tuo partner inizi a mettere il tappo al dentifricio. Non accadrà mai. E’ tempo di andare oltre. Sei vuoi validare il tuo sito devi sbarazzarti di Embed. In questo articolo, ti mostrerò come fare.

Filmati online: Google Video e YouTube

I lettori di alistapart.com si ricorderanno dell’articolo di Drew McLellan Flash Satay: Embedding Flash While Supporting Standards.
http://www.alistapart.com/articles/flashsatay/
In questo articolo, Drew illustra un metodo per inserire una animazione Flash in una pagina senza utilizzare l’elemento Embed.
Flash Satay si articola in due parti. Nella prima, Drew illustra come usare un singolo elemento Object per chiamare l’oggetto Flash, utilizzando correttamente il tipo MIME. Nella seconda, per un corretto streaming dei filmati Flash, mostra che è opportuno usare un filmato di mediazione per richiamare in streaming il Flash movie.

Ho fatto degli esperimenti con il codice di Drew sui contenuti di Google Video e di YouTube. Rimasi stupita del fatto che Google Video consiglia di utilizzare il solo l’elemento Embed per inserire i suoi filmati nelle pagine Web. Non tanto perché consigli di fare una cosa simile, ma per il fatto che ora Embed sia interpretato da Internet Explorer, il quale anni fa decise di non supportare l’universalmente usato ma non standard elemento in favore della implementazione proprietaria dell’elemento standard Object, con modalità che rendono invisibile Object ai browser che supportano gli standard.
Per converso Internet Explorer supporta ora Embed, ma solo se l’utente ha già installato il player dell’oggetto da eseguire. Diversamente ottiene un errore con l’icona generica di plugin mancante, senza un messaggio esplicativo.
YouTube fornisce invece la soluzione arcinota, con Embed all’interno di Object.

Dal momento che Google Video e YouTube servono i filmati con tecnologia Flash – indipendentemente dal formato che si carica sul servizio – si può utilizzare il metodo a Object singolo di Drew per inserire i filmati in una pagina Web.
http://alistapart.com/d/byebyeembed/googlevideo_nosatay.html

In realtà non è necessario usare la parte Satay del suo codice; i video di Google e YouTube effettuano lo streaming anche in assenza del Flash movie di mediazione.

[La riga va a capo col segno » n.d.t.]

La cosa che mi preoccupa, come ho già detto, non è il formato Flash, con il quale ho un po’ di esperienza, ma l’embedding per QuickTime e Windows Media Player. Ho cercato per anni di integrarli in modo standard, ma senza fortuna. Abbastanza di recente sono giunta a usare il MIME type che consente di utilizzare un singolo Object per i file Windows Media (.wmv). Faccio ancora fatica a credere alla soluzione.

Eureka! Un Object per Windows Media Player

Sono fermamente convinta che prestare attenzione agli errori sia utile. E’ stato soltanto quando ho compreso di aver commesso un errore, e per quale motivo, che sono stata in grado di trovare nuovi modi di risolvere problemi in modo adeguato. Mentre rivedevo la tecnica ho notato che sebbene funzionasse bene per i filmati QuickTime (come descrivo più oltre) non eseguiva correttamente il formato Windows Media su Opera in Windows.

Ho soppresso l’impulso a ignorare il problema; cercando una soluzione sono capitata sul MIME type che consente di utilizzare un singolo Object per l’inserimento di file Windows Media: video/x-ms-wmv.

Per integrare in una pagina un file Windows Media utilizziamo questo codice:

[La riga va a capo col segno » n.d.t.]

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

Tuttavia IE6 e 7 e Safari (una strana accoppiata non è vero?) abbisognano di una piccola spinta supplementare, nella forma di un elemento Param aggiuntivo:

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

E funziona: http://alistapart.com/d/byebyeembed/newwmv.html

Personalmente considero questo piuttosto sperimentale o al limite sacrilego: l’embedding di un Windows Media Player movie senza l’attributo Classid! (quale sarà il prossimo? Documenti validi senza un DOCTYPE?). Ho testato questo semplice esempio in IE5.5, IE6, IE7, Opera Win/Mac e Safari e funziona molto bene.
Detto questo, non eseguo molti script su materiale Microsoft, pertanto la vostra esperienza potrebbe essere diversa. (Nota: ovviamente ci sono molti altri elementi Param che è possibile utilizzare).

L’embedding di filmati QuickTime senza Embed.

Sfortunatamente, sono ancora piuttosto sicura che non ci sia un type in grado di convincere IE ad aprire un filmato QuickTime senza un controllo ActiveX. Le scelte naturali: type=”video/quicktime” oppure type=”application/x-quicktime” funzionano solamente sui browser che supportano gli standard.
Ho intrapreso pertanto una strada diversa.

Alcune premesse di base

Questa tecnica è basata su alcune premesse:

Prima: l’elemento Object è progettato per essere annidato, allo scopo di aiutare i browser nella rappresentazione gradevole.
Se il browser non è in grado di rendere il primo Object, passa a interpretare il primo Object annidato e successivamente gli altri fino a quando non ne trova uno che riesce a interpretare. A questo punto ignora gli altri che seguono nell’ordine di annidamento.
Seconda: la gran parte dei maggiori browser supportano l’elemento Object. L’eccezione più notevole è – sorpresa – Internet Explorer.
Infatti IE interpreta “tutti” gli Object con cui può dialogare – anche se annidati – inoltre rende in modo sbagliato e con spettrali apparizioni quelli con i quali ha problemi di interpretazione. Per fortuna IE7 non rende le apparizioni fantasma, ma purtroppo non interpreta gli annidati se il primo Object ha problemi: dà un messaggio di errore.
Terza: Internet Explorer (compresa la versione 7) implementa l’elemento Object in modo non standard, in modo che gli altri browser debbono ignorarlo.

Credo che la risposta possa trovarsi nel sistema di IE dei commenti condizionali.

Ne ho sentito parlare per la prima volta quando gli sviluppatori stavano cercando di risolvere i problemi sorti con linterpretazione dei CSS da parte di IE7.
I commenti sono peculiari di IE (leggi: proprietari), e così anche è peculiare il fallimento nell’interpretazione corretta dell’elemento Object.
E’ un incontro perfetto.

L’embedding di QuickTime per Internet Explorer

Utilizzo QuickTime per la mia esemplificazione, ma è possibile utilizzare la medesima tecnica per Windows Media Player con l’attributo Classid, come vi mostrerò più avanti.
Per inserire un semplice filmato QuickTime in Internet Explorer, useremo qualcosa di simile a questo codice che segue:

[La riga va a capo col segno » n.d.t.]

<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 dimenticate di definire l’altezza o la larghezza e anche l’orrendo Classid che richiama il controllo ActiveX per QuickTime. Notare che l’elemento Param, che specifica l’URI del video possiede un attributo Name con valore “src”, non “url” e neppure “movie”.

E’ possibile visionare l’esempio qui:
http://alistapart.com/d/byebyeembed/justforie.html
Usando IE vedrete il filmato, con altri browser invece non si vede nulla.

L’embedding dei filmati QuickTime per tutti gli altri

Sebbene i browser che rispettano gli standard non possono interpretare l’Object con l’attributo Classid, che è quel numero terribile invece di un’URL, cercheranno di vedere se c’è un qualsiasi oggetto annidato che essi possano interpretare.

Quindi, proprio prima della chiusura dell’elemento Object, useremo una implementazione standard di Object:

[La riga va a capo col segno » n.d.t.]

Width e Height sono richiesti, e anche il type.

Osservando l’esito di questa combinazione in un browser standard-compliant il funzionamento è ottimo
http://alistapart.com/d/byebyeembed/forall.html

IE6 e le versioni precedenti non possono decidere, come si è già accennato, cosa fare con il secondo Object e producono una resa fantasma senza contenuti.

Come evitare che IE renda male quello che non può vedere

Sebbene i commenti condizionali di IE siano stati disegnati per il fine piuttosto discutibile di servirgli codice speciale che è nascosto ad altri browser, li utilizzeremo qui per nascondere codice a IE e non agli altri browser. (E’ quasi uno schiaffo al viso – sebbene prevedibile – che Microsoft abbia la faccia tosta di riferirsi agli altri browser definendoli “downlevel”.)

I commenti scritti con la “sintassi originale” di Microsoft non validano (sorpresa) ma fortunatamente Lachlan Hunt ha mostrato un modo di sistemarli per essere corretti.

Abbiamo bisogno di nascondere il secondo Object a IE con il suo sistema di commenti.
Inseriamo <!–[if !IE]>–> davanti al secondo Object e <!–<![endif]–> dopo la sua chiusura.

[La riga va a capo col segno » n.d.t.]

Ora è bellissimo!
http://alistapart.com/d/byebyeembed/hide2ndobject.html

Volendo si possono aggiungere tutti i parametri per Object come descritti nel sito per gli sviluppatori di Apple.
Per i prossimi test userò un filmato leggermente meno rauco.

I dettagli per Windows Media Player

Se si preferisce inserire un file Windows Media col Classid e non col metodo a singolo Object che ho mostrato all’inizio dell’articolo, il codice è di poco diverso. Come Classid dell’Object iniziale usare classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″.
Per specificare l’URL del file video useremo l’elemento Param con attributo Name con valore “url” per molti browser e quindi
ripeteriamo il valore usando “src” per Safari.

Poi nel secondo Object, implementato in modo standard, si userà il medesimo codice che abbiamo visto nel metodo a Object singolo.

Ecco un esempio:
http://alistapart.com/d/byebyeembed/hide2ndwmv2.html

[La riga va a capo col segno » n.d.t.]

Un piccolo difetto: cosa rimane da fare

Nel gennaio del 2006 Apple ha iniziato a promuovere l’uso di Javascript per chiamare i filmati nelle pagine Web, in modo da evitare all’utente di dover cliccare sull’ActiveX per attivare il video.
E’ una storia lunga e complicata che ebbe inizio con l’azione legale contro Microsoft e trovò fine rendendo a noi tutti più difficile la vita.
In ogni modo i metodi sopra descritti funzionano bene senza alcun Javascript, con un solo avvertimento: I filmati QuickTime non attiveranno l’autoplay in IE.

Non sono sicura di volere anche il video di esempio in autoplay! Tuttavia, trovo estremamente sospetto che i file del player Windows carichino in background e con autoplay senza alcuna interazione, mentre i filmati QuickTime mostrano solo il frame iniziale mentre l’audio si sente, ma nessuna immagine in movimento si attiva.

In ogni caso voglio capire come i controlli di attivazione dell’ActiveX funzionano, prima di implementare ciò che io considero una piuttosto laboriosa soluzione in Javascript per l’intero mio sito.
Uso molto poco Javascript e preferisco continuare così.

Che si intraprenda o meno tale soluzione è ora irrilevante nel contesto di questo articolo. Potete ancora evitare, in ogni caso, l’uso di Embed a favore dell’elemento Object.
Mi sarebbe piaciuto immaginare un modo per nascondere gli oggetti interni solo a IE6 e precedenti versioni, dal momento che IE7 (almeno nella versione beta 2) sembra interpretare correttamente gli oggetti annidati, ma non vi sono riuscita.
Mentre c’è un commento condizionale che lo consentirebbe (<!–[if gte IE 7]>–>), i caratteri aggiuntivi (–>) che Lachlan indica per la validazione risultano visibili con IE7 (come dovrebbero del resto essere, per logica).
Qualche idea?

Sulle spalle dei giganti

Altre persone hanno già lavorato a questi problemi. Questo articolo
http://realdev1.realise.com/rossa/rendertest/quicktime.html
concorda sulla bontà della soluzione con Object annidato, ma risolve in modo piuttosto complicato, con i CSS, il nascondimento del secondo oggetto.

Ian Hickson usa i commenti di IE
http://ln.hixie.ch/?start=1081798064&count=1
per nascondere il secondo oggetto a IE che abbia contenuto Flash.

E ancora il summenzionato Lachlan Hunt mostra come scrivere in modo corretto i commenti condizionali che nascondono a IE il codice, mentre lo rivelano agli altri browser.

[n.d.t.: Joe Clark, in una cronistoria del corretto embedding, cita Roberto Scano (2004) per una soluzione no-embed sempre con i commenti condizionali:
http://joeclark.org/access/captioning/bpoc/embed-object.html.
Gli esempi di sottotitoli e tracce audio alternative nei vari formati (Wmv, QuickTime, Real, Flash), presenti all’interno della sezione Accessibilità del multimedia in questo sito (gennaio 2006), sono tutti implementati correttamente con i commenti condizionali.]