Inserir Flash corretamente em XHTML

Postado por: Pedro Rogério em

Embora 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]-->

Artigo original

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

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.

33 Responses to “Inserir Flash corretamente em XHTML”

  1. Eu uso esse código, e é valido como HTML:

    em XHTML não valida deste jeito?

  2. Em XHTML funciona corretamente também!

  3. Ivan

    Seria bacana se vc mostrasse com exemplos práticos. Não só jogando o código!
    Isso vale para este e outros posts tbm!

  4. Joilson Marques

    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…

  5. Joilson Marques

    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

  6. 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

  7. Flavio Mendes

    Muito oportuno o seu artigo, parabéns!

    Só faltou creditar o artigo

  8. Flávio,

    Leu o artigo todo? Olhe no final do artigo!!!

  9. Flavio Mendes

    Pedro, desculpe-me a mancada…

  10. Claudio fila

    interessante, mas caso eu precise inserir o flash de modo “transparent” como ficaria?

  11. Karol

    Mas com ajax não funciona esse código… dessa maneira… alguem sabe o por q?

  12. 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

  13. 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:

  14. 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?

  15. 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.

  16. son@mbulo

    Não valida o xhtml no w3c por causa do < !–-…
    Tá dificil…

  17. Thiago Amaral

    A Melhor solução é essa:
    http://blog.deconcept.com/swfobject

  18. 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…

  19. 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.

  20. Rutenio

    na verdade, basta colocar o a tag dentro da que dá certo

  21. Mauricio

    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.

  22. caso queiram observar acessem: http://www.mauricioti.kit.net

    Obrigado.

  23. 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">

  24. Rafael Marinho

    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.

  25. 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.

  26. 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.

  27. 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

  28. PS: claro, sempre usando a tag ” script” antes

  29. Só que é o seguinte, esse script utiliza a tag embed, que está depreciada!!!

  30. verdade Pedrão, vc está totalmente correto, o seu código está muito bom, só necessita de validar em outros browser!
    abraços!

  31. 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

  32. Funcionou perfeitamente em XHTML(transitional) e validado pelo W3C. Valeu pela dica e Parabéns pelo post…

  33. bruno

    Muito bom o post!
    Eu gostaria que se possível, mostrasse como insrir arquivos .flv validos.
    Parabéns pelo blog.

Leave a Reply