Inserir Flash em XHTML
Postado por: Pedro Rogério em
A grade maioria dos desenvolvedores sabe que a tag embed caiu em desuso desde 2006 por se tratar de uma tag proprietária da Netscape, assim não obedecendo aos WebStandards.
É comum você ver por aí códigos que ainda utilizam embed, como no Youtube, vejam esse código de exemplo abaixo para entenderem o que estou dizendo:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/YV3gxkXpkno&hl=pt-br&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/YV3gxkXpkno&hl=pt-br&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
Esse código faz a utilização de embed, deixando assim seu HTML inválido. Uma forma simples e correta de escrita do mesmo código acima pode ser utilizada da forma abaixo:
<object width="480" height="385" type="application/x-shockwave-flash" data="http://www.youtube.com/v/YV3gxkXpkno">
<param value="high" name="quality" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param value="http://www.youtube.com/v/YV3gxkXpkno" name="movie" />
</object>
E você ainda pode ir além proporcionando um alternativa ao usuário caso ele não tenha o plugin do Flash instalado no PC. No meu caso vou utilizar aqui uma imagem dizendo que alí deveria aparecer um objeto multimídia.
<object width="480" height="385" type="application/x-shockwave-flash" data="http://www.youtube.com/v/YV3gxkXpkno">
<param value="high" name="quality" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param value="http://www.youtube.com/v/YV3gxkXpkno" name="movie" />
<img src="http://www.cssnolanche.com.br/uploads/video.png" alt="Vídeo (Objeto multimídia)" title="Vídeo (Objeto multimídia)" />
</object>
Vejam abaixo esse código funcionando:
Caso você queira inserir Windows Media Player em seu site, basta utilizar o seguinte código de exemplo:
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" width="320" height="260"> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" /> <param name="autostart" value="true" /> <param name="controller" value="true" /> <img src="http://www.cssnolanche.com.br/uploads/video.png" alt="Vídeo (Objeto multimídia)" title="Vídeo (Objeto multimídia)" /> </object>
E comoo podem ver, funciona corretamente.
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 CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
O que você colocou é a melhor forma de se fazer seguindo os padrões, mas infelizmente o IE6 é o atraso nas nossas vidas. Para que o mesmo funcione, ele precisa da tag EMBED. Logo vejo como uma solução, mas infelizmente é assim.
Talvez seja por isso que o YouTube ainda continua utilizando a tag. :s
Abraços.
@Alex,
Eu testei esse código no Internet Explorer 6 versão 6.0.2900.2180 SP2 e funciona corretamente, creio que na build 6.0.2800 também funcione corretamente. Abraços.
Nem sabia que a tag embed caiu em desuso, por isso que meu blog não passa na validação, mas graças ao seu Post esse scenario vai mudar =D.
Ótimo post, valeu Pedro !
@Pedro Rogério
Acabei de testar no IE 6(Nativo), não funcionou =/
Sensacional o post. Tava precisando descobrir isso! aheuaeahus
Abraços!
Utilizo essa forma em meus projetos
- http://blog.deconcept.com/swfobject/
@Wellington
Esse código funciona no IE 6 nativo. Pelo menos aqui funcionou perfeitamente (IE NATIVO!).
Porém já andei lendo que esse código dá problema no IE6, apesar de eu não ter conseguido simulá-lo.
Segundo o site “http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml” o problema ocorre para SWFs que tem o carregando progressivo do filme, ou seja, ele espera o arquivo carregar todo antes de mostrar.
A solução que eles apresentam é com comentários condicionais:
”
<!–
<!–
”
Testem vocês também e digam os problemas.
Até quando IE6 irá incomodar??!!
Abraço.
iii, o blog cortou o código que postei… mas tem no link do latrine.dgx.cz
O exemplo que você linkou não funcionou no meu Safari 4, só roda o áudio, sem vídeo.
Desculpe a minha ignorância, mas não entendo porque embed é inválido se funciona muito bem em todos os navegadores.
Creio que seja mais simples o embed ser reconhecido pela WebStandards. Que sentido faz deixar de utilizá-lo se ele funciona bem todos os navegadores, antigos e atuais? Para mim, nenhum.
@Helen,
Aqui o exemplo funcionou perfeitamente no meu Safari 4. Peço que dê uma olhada nesse artigo para entender o por que de não utilizar embed:
http://www.alistapart.com/articles/byebyeembed/
Eu li o texto e para mim não acrescentou nada. =(
Fiz mais alguns testes que confirmaram a minha primeira dedução de que esses códigos apenas executam o player que a pessoa já tiver na máquina, então, se ela não tiver, lascou tudo!
Acho muito desinteligente criar sites deduzindo e/ou obrigando todos os visitantes a terem QuickTime e/ou Windows Media Player, então eu nem deveria ter comentando neste post antes, já que nada disso faz sentido para mim e nada do que vocês disserem me fará mudar de ideia, porque a questão é outra.
O Safari 4, por exemplo, na minha máquina, insere na página o Windows Media Player default do Windows, aquele bege e bem tosco, e não o WMP 11, que os outros navegadores reconhecem. :S
Desculpe, acho que não precisam continuar perdendo tempo comigo, mesmo porque não sou webdeveloper, sou apenas uma jornalista pragmática que talvez deixe de usar <embed> no dia em que ele deixar de funcionar em algum navegador atual.
Até mais!
@Helen Fernanda
Helen, é importante questionar mesmo, você ta certa, não é perda tempo.
Não sei exatamente o porque que o embed é considerado inválido (não li o link que o Pedro postou, vou ler outra hora).
Mas a luta é pela padronização de tags e se todos os browsers seguissem essa padronização não haveria problema.
No meu Safari 4.0 (Windows) funcionou corretamente. No Firefox ídem. No IE6 pode dar problema. Isso depende de fatores como plugins também.
Por isso que você não pode pensar: “…talvez deixe de usar no dia em que ele deixar de funcionar em algum navegador atual.”
Na verdade o embed só funciona nos navegadores atuais, porque eles não podem radicalizar e seguirem somente os padrões, se não, muitos sites iam parar de funcionar.
Mas aos poucos eles vão deixando as velhas tags de lado e aí quem não se preocupou com os padrões vai ficar na mão.
Uma coisa que não fez sentido pra mim no seu comentário foi: “Acho muito desinteligente criar sites deduzindo e/ou obrigando todos os visitantes a terem QuickTime e/ou Windows Media Player”. Ou desenvolvedor obriga o usuário a ter ou ele não assisti, não tem alternativa! Como ele vai assistir um vídeo na internet? se ele usar o Flash, de qualquer maneira obrigado o usuário a ter o plugin do flash.
Não sei se foi nesse sentido o teu comentário, hehe. Qualquer coisa posta aí, não se acanhe, hehe.
Abraço.
@Bruno, é nesse sentido sim. E viva o Flash! Depois do YouTube, ele é quase tão essencial quanto ter um navegador.
Abraço para você também.
@Helen,
Logo não será mais preciso ter flash player instalado na máquina para ver vídeos na internet, tudo isso graças ao HTML5:
http://www.pinceladasdaweb.com.br/blog/2009/06/17/html5-e-o-fim-do-flash-player/
Oi,pessoal…..ando numa luta, tentando colocar um video, (uma demonstração de um software, tipo video-aula) no meu site, mas não quero nenhuma ligação com o youtube, não convém…
Encontrei dois sites que geram a ebedded automaticamente, o que achei espectacular….
Para quem quer continuar a usar a embedded…..aqui vão os sites:
http://cit.ucsf.edu/embedmedia/step1.php
http://www.midiadigital.com.br/gerador- … alido-w3c/
O problema agora é a guerra entre os browsers…
o IE não suporta o video em media player…
Alguém sabe alguma forma de contornar o problema?
Algum outro pluggin?
abraços
Bacana o texto, mas me diz, ele nao aceita tamanhos como 100%????
To tentando assim mas nao vai
@Flávio,
Para que 100% funcione, o flash deve estar dentro de uma área com largura definida, só assim então ele irá conseguir aplicar 100% ao flash.
me ajudou muito seu artigo, agora como faço para acultar a barra de controle de vídeo, quero que apareça somente o video repetidas vezes