Inserindo Flash Corretamente no XHTML

[Carlos Designer 0]

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!

[Progress 2]

Ótima solução, mandou bem Carlos Designer.

 

[]'s

[Carlos Designer 0]

Opa Progress! beleza!

 

Então, uma hora tinha que aparecer uma solução decente!

[brcontainer 16]

Eu já tinha lido sobre o assunto em um blog, muito bom mesmo.

 

Mas apesar de considerado a maneira correta, eu ainda prefiro inserir o SWF usando javascript, no meu caso eu uso SWFObject 2.0, pois assim evita o desgaste de escrever demais, ajuda a não indexar em buscadores meus SWFs.

 

Eu sei, eu sei que se o usuario desabilitar o JAVASCRIPT do navegador os flashs não aparecerão, no meu caso eu crio imagens replacentes(backgrounds que aparecem se não tiver carregado o flash) e se for um menu o desenvolvedor deve criar um menu alternativo em HTML tanto para o acesso dos buscadores quantos para o acesso do teclado, que as vezes com flash se torna mais dificil(mas não impossivel).

[DGM Designer 0]

Muito boa Carlos...

 

É o melhor script que encontre na Internet....

 

Parabéns...

[[ GuTo ] 0]

Bom dia,

 

Em um site estou servindo o flash desta forma e ele aparece OK.

A diferença é que temos um servidor de Streaming e servimos os vídeos +/- assim: myPlayer.swf?Path=/Biblioteca/Videos/video-0001.flv

 

Estamos disponibilizando exatamente o mesmo código que nós usamos para exibir o flash em nossa página para o usuário que quiser publicar em seu site, assim como o youtube disponiliza e o www.uhull.com.br faz em cada post de seu blog. Sacaram a idéia?

 

Pois bem, quando copio este código e por exemplo coloco ele em um HTML normal meu e salvo no meu Desktop e abro-o pelo browser, não é carregado o vídeo. Estamos achando isso muito estranho.

 

Pensamos nos seguintes problemas:

1 - Problema de permissão no acesso externo no servidor, mas nosso Adm de rede nos informou que está tudo ok (porém duvidamos um pouco dele). Beleza, vamos pensar em outros possíveis...

2 - Problema neste código HTML de exibição do Flash: Dúvidamos que seja isso, mas não cremos nisto, hehe.

3 - Problema no nosso player (myPlayer.swf?Path=/Biblioteca/Videos/video-0001.flv): Estamos crendo realmente que seja esse o problema nosso, mas temos que ver alguém da empresa aqui que manje de FLASH para poder analisar a questão (poder abrir o .swf se tiver os fontes).

 

O que vocês acham?

 

Desculpe se não fui claro e qualquer dúvida sobre é só perguntarem.

Um abraço!