Inserindo Flash Corretamente no XHTML

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.

Aqui mesmo no fórum encontrei um código semelhante a 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
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="550" height="400">
...

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

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 type="application/x-shockwave-flash" data="movie.swf" width="300" height="135">
<!-- <![endif]-->

<!--[if IE]>
<object 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">
<param name="movie" value="movie.swf" />
<!--><!--dgx-->

 <param name="loop" value="true" />
 <param name="menu" value="false" />

 <p>Conteúdo alternativo</p>
</object>

<!-- <![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<objects.length; i++)
	window.setTimeout("eolas(" + i + ")", 1);

O código consiste em básicamente reescrever as tags object removendo as bordas indesejaveis.

A solução final para o nosso script seria então:

**

Colocar o js em um comentário condicional para o IE

<!--[if IE]><script type="text/javascript" src="fix_eolas.js" defer="defer"></script><![endif]-->

E o código com os comentários condicionais

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

<!--[if IE]>
<object 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">
<param name="movie" value="movie.swf" />
<!--><!--dgx-->

 <param name="loop" value="true" />
 <param name="menu" value="false" />

 <p>Conteúdo alternativo</p>
</object>

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

Fonte:http://latrine.dgx.cz/

Fica ai mais essa grande dica.

Abraços!