Sei in: inizio » web design » articolo

Oggetti Flash in XHTML Strict valido

Pagina 1 di 3

Argomenti: XHTML Flash

I siti che permettono di includere i loro contenuti multimediali in Flash su siti/blog esterni forniscono di solito, anzi sempre, del codice HTML. Se invece è necessario utilizzare del codice XHTML Strict valido, occorre effettuare qualche modifica al codice.
Innanzitutto, si deve eliminare il tag embed e utilizzare esclusivamente il tag object, che deve contenere gli attributi type e data.
Nella maggior parte dei casi, l'attributo data corrisponde all'attributo src dell'elemento embed oppure al valore del parametro movie, se specificato.
Eventuali parametri per il lettore Flash possono essere passati nel tag param, attraverso l'attributo FlashVars.
Inoltre, ci si deve ricordare di cambiare ogni occorrenza del carattere "&" con l'entità "&" .

Per automatizzare la conversione del codice, ho sviluppato un semplice strumento degradabile (Javascript e PHP), che si può aprire cliccando sul link sottostante:

Apri il convertitore HTML - XHTML

Il convertitore è disponibile anche come Google Gadget, che può essere aggiunto al proprio sito o pagina iGoogle.

Di seguito verranno esposti alcuni esempi pratici di trasformazione da HTML a XHTML Strict per i contenuti Flash multimediali forniti da: Veoh, Deezer, Yahoo, La7, Libero, Revver, Brightcove, YouTube, GoogleVideo, Metacafe, Yahoo, Megavideo, Hulu.

video Youtube

Codice originale in HTML:

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&rel=0"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/qdeMqqghXRI&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

Codice modificato in XHTML Strict:

<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/qdeMqqghXRI&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&amp;rel=0"></param>
<param name="wmode" value="transparent"></param>
</object>

Per l'opzione di riproduzione automatica del video basta aggiungere i caratteri: &amp;autoplay=1 nell'attributo data e nel valore del parametro movie

Esempio di trasformazione in XHTML 1.0 Strict e risoluzione degli errori di validazione:

audio Deezer

Codice originale in HTML:

<div style="width:180px;height:45px;">
<object width="180" height="29"><param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900"></param>
<embed src="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900" type="application/x-shockwave-flash" width="180" height="29"></embed>
</object>
<a href="http://www.deezer.com" style="border:none;margin:0;padding:0;">
<img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" border="0" style="border:none;margin:0;padding:0;" />
</a></div>

Codice modificato in XHTML Strict:

<div style="width:180px;height:45px;">
<object type="application/x-shockwave-flash" width="180" height="29" data="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&amp;color1=990000&amp;color2=cc6600&amp;color3=cc9900">
<param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&amp;color1=990000&amp;color2=cc6600&amp;color3=cc9900" />
</object>
<a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" style="border:none;margin:0;padding:0;" /></a>
</div>

video Yahoo

Codice originale in HTML:

<object width="512" height="323">
<param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="id=3167174&vid=713479&lang=it-it&intl=it&thumbUrl=http://us.i1.yimg.com/us.yimg.com/i/us/sch/cn/video09/713479_rnd3ad900a1_17.jpg" />
<embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" type="application/x-shockwave-flash" width="512" height="323" allowFullScreen="true" flashVars="id=3167174&vid=713479&lang=it-it&intl=it&thumbUrl=http://us.i1.yimg.com/us.yimg.com/i/us/sch/cn/video09/713479_rnd3ad900a1_17.jpg" ></embed>
</object>

codice modificato in XHTML Strict:

<object type="application/x-shockwave-flash" data="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" width="512" height="323">
<param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="id=3167174&amp;vid=713479&amp;lang=it-it&amp;intl=it&amp;thumbUrl=http://us.i1.yimg.com/us.yimg.com/i/us/sch/cn/video09/713479_rnd3ad900a1_17.jpg" />
</object>

video La7

Codice originale in HTML:

<object width="400" height="330">
<param name="movie" value="http://www.la7.it/swf/flvplayer.swf?contentURL=/video/crozza_italia/crozzaitalia_261107_hannibal.flv&imgPath=/img/video/320X240/6158.jpg"/>
<param name="allowFullScreen" name="true"/>
<embed src="http://www.la7.it/swf/flvplayer.swf" FlashVars="contentURL=/video/crozza_italia/crozzaitalia_261107_hannibal.flv&imgPath=/img/video/320X240/6158.jpg" type="application/x-shockwave-flash" allowFullScreen="true" width="400" height="330"></embed>
</object>

Codice modificato in XHTML Strict:

<object type="application/x-shockwave-flash" data="http://www.la7.it/swf/flvplayer.swf" width="400" height="330"> 
<param name="movie" value="http://www.la7.it/swf/flvplayer.swf?contentURL=/video/crozza_italia/crozzaitalia_261107_hannibal.flv&amp;imgPath=/img/video/320X240/6158.jpg" />
<param name="FlashVars" value="contentURL=/video/crozza_italia/crozzaitalia_261107_hannibal.flv&amp;imgPath=/img/video/320X240/6158.jpg" />
<param name="allowFullScreen" value="true" />
</object>

video Libero

Codice originale in HTML:

<object width="400" height="333">
<param name="movie" value="http://video.libero.it/static/swf/eltvplayer.swf?id=c6ecddc29d158763e728a249be61cc91.flv&ap=0" />
<embed src="http://video.libero.it/static/swf/eltvplayer.swf?id=c6ecddc29d158763e728a249be61cc91.flv&ap=0" width="400" height="333" type="application/x-shockwave-flash"></embed>
</object>

Codice modificato in XHTML Strict:

<object type="application/x-shockwave-flash" width="400" height="333" data="http://video.libero.it/static/swf/eltvplayer.swf?id=c6ecddc29d158763e728a249be61cc91.flv&amp;ap=0" >
<param name="movie" value="http://video.libero.it/static/swf/eltvplayer.swf?id=c6ecddc29d158763e728a249be61cc91.flv&amp;ap=0" />
</object>
1 2 3 Successiva»

Mostra tutte le pagine dell'articolo in un'unica lunga pagina. Tutto in una pagina

Pubblicità

Il tuo annuncio qui

La descrizione qui

referenti Controlla con Yahoo! le pagine web che fanno riferimento a questo articolo.

|

reagisci Reagisci a questo articolo, esprimendoti via email.

|

salva Salva questo articolo usando i servizi web2.0 online, il segnalibro può rimanere privato oppure può essere condiviso con il resto del mondo.

|

stampa Se Javascript è disabilitato, dovrai usare i menu del browser per stampare questa pagina.