Inserir Flash corretamente em XHTML
Postado por: Pedro Rogério emEmbora o Flash seja um elemento muito ativo nas páginas Web, muitos desenvolvedores ainda não sabem como inserí-lo corretamente em XHTML. O conceito padrão, utilizado pela macromedia é absolutamente fora de contexto:
<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>
Os atributos <object> são subordinados somente as necessidades do IE e não trabalharão em outros browsers. O atributo <embed> é para os outros browsers, mas ele não é listado nas especificações do HTML ou XHTML. O código consequentemente é inválido. O maior problema é que você não há uma forma de você fornecer conteúdo alternativo aos usuários que navegam com flash desabilitado.
Procurando a solução
Quais são as exigências?
- Deve trabalhar em todos os browsers.
- Deve indicar conteúdo alternativo se o plugin Flash estiver desabilitado.
- Não deve depender de Javascript.
Vamos então começar nos livrando da tag <embed>:
<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>Esse é o conteúdo alternativo</p>
</object>
A solução apresentada funciona corretamente no IE e Opera, e se o usuário tiver o plug-in do flash desabilitado, o conteúdo alternativo é mostrado corretamente, mas no Mozilla ele não mostrará o Flash, somente o conteúdo alternativo. Vamos então remover o classid e o codebase e substituílos pelo MIME TYPE correto e a data contendo o path com o endereço do filme.
<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>Esse é o conteúdo alternativo < /p>
</object>
Isso funciona-rá no Mozilla e no Opera, no IE não. Então como combinar os dois scripts? Introduzindo ambos no HTML e diferenciá-los usando-se conditional comments.
O Código para o IE ficaria assim:
<!--[if IE]>
Código HTML para o IE
<![endif]-->
Mas como atribuir um código dedicado a outros browsers? Para isso existe um conditional comments “negado”, que por sinal é inválido, mas nós corrigimos esse erro usando um truque, reescreveremos o comentário no final.
<!--[if !IE]> -->
Código HTML para todos, exceto o IE
<!-- <![endif]-->
Solução final
<!--[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" />
<!--><!---->
<param name="loop" value="true" />
<param name="menu" value="false" />
<p>Esse é o conteúdo alternativo</p>
</object>
<!-- <![endif]-->
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Eu uso esse código, e é valido como HTML:
em XHTML não valida deste jeito?
Em XHTML funciona corretamente também!
Seria bacana se vc mostrasse com exemplos práticos. Não só jogando o código!
Isso vale para este e outros posts tbm!
Bacana!
Uma outra opção funcional e que eu particulamente acho mais fácil por não usar if’s condicionais e ainda ser válida em XHTML está abaixo:
<a title="Clique para instalar o flash player" href="http://www.macromedia.com/shockwave/download/alternates/" rel="nofollow">
</a>
é espero ter contribuido…
Como o código nao apareceu no meu comentário aqui vai em modo texto =D
<a title="Clique para instalar o flash player" href="http://www.macromedia.com/shockwave/download/alternates/" rel="nofollow">
</a>
Flws
Li um artigo explicando como inserir o Flash corretamente no site. Muito bom, dá opções e diz o porque não funcionam.
No final, dá uma solução final, com o código pronto. Muito bom.
http://www.dgx.cz/trine/item/how-to-correctly-insert-a-flash-into-xhtml
Muito oportuno o seu artigo, parabéns!
Só faltou creditar o artigo …
Flávio,
Leu o artigo todo? Olhe no final do artigo!!!
Pedro, desculpe-me a mancada…
interessante, mas caso eu precise inserir o flash de modo “transparent” como ficaria?
Mas com ajax não funciona esse código… dessa maneira… alguem sabe o por q?
Estou com um problema: coloquei meu swf em uma página que o carregou corretamente no Mozilla, mas o IE6 e IE7 não conseguiram carregá-lo (não utilizei o código acima). Este swf está em uma DIV. Primeiramente estava colocando-o como plano de fundo da div, o que funcionou tb só no Firefox. Depois coloquei o swf direto na DIV e não funcionou novamente no IE…
Encontrei este artigo e fui testar… Um novo problema: o código acima recomendado, e que foi inserido em meu Template de Dreamweaver, interferiu no código, modificando as regiões editáveis(duplicou) entre outros bugs… o que deve ter sido ocasionado pelas tags –> < !– .
Então fica o alerta…para quem quiser esse código em um Template… rs
Flash… flash… ai ai ai… só quero ver como é que vou validar o flash no W3c… colocar acessibilidade… etc
Estou com este problema também,
coloquei um swf em uma página que o carregou corretamente no Mozilla, mas o IE6 e IE7 não conseguiram carregá-lo (não utilizei o código acima). Este swf também está em uma DIV.
Eis o Código:
Pessoal, aqui funcionou, no entanto apareceu aquele PopUp do Internet Explorer e depois ainda tem que dar o click de ativação, alguém sabe como resolver esse problema?
Gostaria de aprender a usar melhor o html não sei nada preciso de ajuda urgente.
preciso colocar uma barra de rolagem em que a imagem jpg acima fique estática e mais abixo possa ter uma barra de rolagem sem mexer na jpg de cima.
Não valida o xhtml no w3c por causa do < !–-…
Tá dificil…
A Melhor solução é essa:
http://blog.deconcept.com/swfobject
Bem, eu posso estar enganado, mas pelo que entendi e que vi por aí, não é necessário colocar nenhum comentário condicional, pois o IE interpreta:
<object type="application/x-shockwave-flash" data="movie.swf" width="550" height="400">
Porém ele não entende o “data”, sendo assim, basta adicionar o parâmetro “movie”, que será entendido pelo IE, Firefox, Opera (testei no Safari para Windows também), ficando ao final assim:
<object type="application/x-shockwave-flash" data="slide.swf" width="640" height="480">
<param name="movie" value="slide.swf" />
<p style="border:1px solid; width:640px; height:480px">Para visualizar
este conteúdo corretamente, é necessário ter o <a title="Clique
para instalar o flash player" href="http://www.macromedia.com/shockwave/download/alternates/" rel="nofollow">Flash
Player</a> instalado.</p>
</object>
Testei isso no IE 6, mas acho que funcionará nos outros…
Pessoal essa Dica do Matheus realmente é a melhor, testei no IE 7, Opera, FireFox, Netscape, e validei o código pelos padrões WCAG e e-gov.
Completamente dentro dos padrões de acessibilidade e visivel em todos os navegadores supracitados. Valeu Matheus, só faltou o parâmetro TITLE pra ficar redondo.
O meu ficou assim, é uma animação chamada Sábado Especial.
Sábado Especial
Para visualizar este conteúdo corretamente, é necessário ter o
Flash
Player instalado.
na verdade, basta colocar o a tag dentro da que dá certo
Pessoal Bom dia,
Estou com um problema estranho,
inseri o script em meu site e funcionou corretamente no IE e no Firefox, porém localmente.
Quando eu publico o site, o flash só roda no IE, no Firefox fica a tela em branco.
O que poderia ser?
Obrigado pela ajuda.
caso queiram observar acessem: http://www.mauricioti.kit.net
Obrigado.
Mauricio, o problema que ocorreu é simples, você colocou a barra invertida, mas na web devemos usar a barra normal para caminhos de arquivos e talz…
Acredito que localmente funcionou, pois é o padrão do Windows…
Deve ficar assim:
<object type="application/x-shockwave-flash" data="images/logo.swf" width="450" height="86">
Olá a todos.
Eu coloquei o código que foi indicado aqui dentro de um Div e ele põem la o .swf mas esta todo branco. ( isto no IE e no Firefox trabalhando localmente com um servidor web)
Eu coloquei o código num html simples só com o código indicado e ele mostra o swf sem problemas. ( isto no IE e no Firefox trabalhando localmente com um servidor web)
Será que alguém sabe porque.
Desde já obrigado pela ajuda.
Falta uns hífens no fechamento do último comentário condicional.
Comigo funcionou perfeitamente e validou (transitional) no IE 7, Firefox 2 e Opera 9.
Para o fundo ficar transparente, usei
Agora só falta eu conseguir tirar o “…activate and use this control” do IE.
Parabéns pelo Pinceladas. Acompanho regularmente pelos feeds e hoje acabei chegando aqui através do Google, procurando por flash e xhtml.
Comigo aconrteceu um problema…
NO opera, swfs com ações rollouver só são ativados se eu clicar em cima da animação. Já com firefox ou IEs funciona normal.
Eu achei que o código fica muito sujo dessa forma, apesar de ser correto…
o problema eh que vc só está pensando em 3 browsers…
hj em dia, um programador/webmaster/webdesigner/modafoca tem que pensar no mínimo em 5, Browsers, OS, Display, Explorer, Netscape, Mozilla, Firefox e Opera.
( pelo menos para mim…)
e o código que uso que sempre roda bem seria esse:
AC_FL_RunContent
( ‘codebase’,
‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0′,
‘width’,
‘ __ ‘,
‘height’,
‘ __ ‘,
’src’,
‘SeuMovie’,
‘quality’,
‘best’,
‘pluginspage’,
‘http://www.macromedia.com/go/getflashplayer’,
‘movie’,
‘SeuMovie’ );
posso estar errado, mas pra mim funicona que eh uma blz
PS: claro, sempre usando a tag ” script” antes
Só que é o seguinte, esse script utiliza a tag embed, que está depreciada!!!
verdade Pedrão, vc está totalmente correto, o seu código está muito bom, só necessita de validar em outros browser!
abraços!
Aee me ajudou muito..
estava quebrando a cabeça pra colocar um menu em flash em um site do wordpress…
agora consegui dá um look: http://www.garagem69.com.br
Funcionou perfeitamente em XHTML(transitional) e validado pelo W3C. Valeu pela dica e Parabéns pelo post…
Muito bom o post!
Eu gostaria que se possível, mostrasse como insrir arquivos .flv validos.
Parabéns pelo blog.