Inserindo Flash Corretamente no XHTML

Quem se preocupa com padrões com certeza já se deparou com o problema de colocar um flash que válida na página e/ou com texto alternativo caso o usuário não tenha o flash instalado.

Na internet podemos encontrar códigos como este:

function putFlash(x, y, file){
document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+x+"' height='"+y+"'>");
document.write("<param name='movie' value='"+file+"' />");
document.write("<param name='quality' value='best' />");
document.write("<param name='wmode' value='transparent' />");
document.write("<embed src='"+file+"' wmode='transparent' quality='best' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='"+x+"' height='"+y+"'></embed>");
document.write("</object>");
}

Funciona bem até o momento que o usuário tenha o javascript ativo no seu navegador, caso não tenha ou não tenha o flash nada sera exibido.
Tradicionalmente tinhamos o seguinte código para inserir flash:

<object width="100" height="100" type="application/x-shockwave-flash"></object>

...
<object width="550" height="400" data="movie.swf" type="application/x-shockwave-flash"><param name="bgcolor" value="#ffffff" /><param name="src" value="movie.swf" /><param name="quality" value="high" /></object> type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">

Mas o problema dele é que tag embed não é uma especificação da W3C, portando não devemos usar.

O que precisamos?

• Uma solução que funcione nos principais navegadores
• Mostre um texto alternativo caso o usuário não tenha o flash instalado
• Não seja totalmente dependente de JavaScript

O seguinte código funciona perfeitamente no IE5+ e ainda fornece um conteúdo alternativo caso o flash não esteja instalado.

<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com..."
width="550" height="400">

<param name="movie" value="movie.swf" />
<param name="loop" value="false" />
...
<p>Conteúdo alternativo</p>

</object>

Infelizmente o código acima não funciona no Firefox e Safari, ja o seguinte funciona:

<object
type="application/x-shockwave-flash"
data="movie.swf"
width="550" height="400">

<param name="loop" value="false" />
<param name="movie" value="movie.swf" />
...
<p>Conteúdo alternativo</p>
</object>

O que precisamos é uma maneira de juntar isso tudo, o que pode ser feito usando os comentários condicionais do Internet Explorer

Teriamos a seguinte solução usando os comentários condicionais:

<!--[if !IE]> -->
<object width="300" height="135" type="application/x-shockwave-flash"></object>

<!--[if IE]>
<span class="mceItemObject"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="300" height="135">

<span  name="movie" value="movie.swf" class="mceItemParam"></span> <!--><!--dgx-->

Conteúdo alternativo
<!-- <![endif]-->

Note o uso do <!–[if !IE]> –> para o código não destinado ao IE.

Pronto, nosso código estaria perfeito se não fosse aquela borda que aparece no flash no IE7 pedindo para clicar para ativar o controle.

Para resolver esse problema existe o método Eolas workaround trick, que é um pequeno js.
fix_eolas.js

var objects = document.getElementsByTagName("object");
function eolas(i)
{
objects[i].outerHTML = objects[i].outerHTML;
}

for (var i=0; i<object width="100" height="100" type="application/x-shockwave-flash"></object>

<span style="color: #000000;">A solução final para o nosso script seria então:</span>

<span style="color: #800000;">Colocar o js em um comentário condicional para o IE</span>
[sourcecode language='html']
<!--[if IE]><mce:script type="text/javascript" src="fix_eolas.js" mce_src="fix_eolas.js" defer="defer"></mce:script><![endif]-->

E o código com os comentários condicionais

<!--[if !IE]> -->
<object width="300" height="135" type="application/x-shockwave-flash"></object>

<!--[if IE]>
<span class="mceItemObject"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="300" height="135">

<span  name="movie" value="movie.swf" class="mceItemParam"></span> <!--><!--dgx-->

Conteúdo alternativo
<!-- <![endif]-->

Pronto!

• Temos uma solução que funciona no IE5 e superiores, família Mozila, Opera e Safari
• Mostra conteúdo alternativo caso o flash não exista
• Só depende do JavaScript para tirar a borda do Flash no IE7

Preview

Posts relacionados

• 28/02/2009 -- Centralizando Layout com CSS
• 28/02/2009 -- Recomendação de Livros para Web Design
• 15/12/2008 -- Bug da margem duplica no Internet Explorer 6
• 14/12/2008 -- Problemas com floats - Desobstruindo floats
• 14/12/2008 -- CSS para Inspiração

(2 votes, average: 5,00 out of 5)

 Loading ...