Voltar para o site

Adeus tag EMBED

Publicado em: 15/07/2006

Autor: Elizabeth Castro
URL do original: https://www.alistapart.com/articles/byebyeembed
Título original: Bye Bye Embed
Translated with the permission of A List Apart Magazine and the author.

Uma coisa que sempre me enfureceu é o fato de o navegador Internet Explorer não oferecer suporte standard à tag object e assim forçar o uso da tag não padronizada embed para inserir filmes em uma página web. Até mesmo no site da Apple a tag embed — uma extensão da Netscape — está tão arraigada que é difícil de se encontrar informações sobre o uso do elemento object para o QuickTime, exceto por vias não padronizadas.

O uso do elemento embed vem de longa data. Querer que ele faça parte das especificações oficiais é o mesmo que esperar que seu filho adolescente não jogue a toalha de banho molhada em cima da cama. Isto não vai acontecer. É tempo de mudanças. Se você quiser validar seu website, terá que se livrar de embed. Neste artigo eu vou lhe ensinar como fazer isto.

Filmes online: Google Vídeo e YouTube

Os leitores do site ALA devem estar lembrados do artigo de Drew McLellan, Flash Satay. Naquele artigo, Drew descreve um método de inserir animações Flash em uma página web sem uso do elemento embed. Flash Satay está dividido em duas partes. Na primeira, Drew chega a conclusão que pode-se chamar a animação Flash usando o elemento object desde que type seja definido adequadamente. Na segunda, para fluir apropriadamente (streaming) os filmes Flash, há necessidade de inserir uma espécie de filme de referência.

Eu realizei experiências com o código de Drew no Google Vídeo e no YouTube. Fiquei chocada com o fato do Google Vídeo sugerir que se use somente a tag embed para inserir vídeos. Putz, chocada não tanto por eles terem feito esta sugestão — chocada porque isto hoje funciona no Internet Explorer, que parou de dar suporte a coisas não standards, mas continua com sua proprietária tag embed de anos atrás (completamente invisível para os navegadores standards) em detrimento do elemento padronizado object. O IE suporta a tag embed apropriadamente desde que o usuário tenha instalado na sua máquina o correspondente player. Caso contrário será reportado um erro com apresentação de um ícone de plugin quebrado, mas sem qualquer orientação de ajuda. YouTube, por sua vez sugere dois caminhos, um via tag object e outro tag embed.

Tanto Google Vídeo comoYouTube servem filmes usando o Flash player — independente do formato no qual os filmes forem colocados — você pode usar o método do elemento object para inserir tais filmes na sua página. Na verdade você não tem que usar a parte chamada de Satay, no código; filmes no Google Vídeo e no YouTube fluem apropriadamente (streaming) mesmo que não esteja incorporado um filme de referência, como sugerido no método. (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.)

<object type="application/x-shockwave-flash" 
  data="https://video.google.com/googleplayer.swf? »
8755581808731033658" 
  width="400" height="326" id="VideoPlayback">
  <param name="movie" 
    value="https://video.google.com/googleplayer.swf? »
docId=8755581808731033658" />
  <param name="allowScriptAcess" value="sameDomain" />
  <param name="quality" value="best" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="scale" value="noScale" />
  <param name="salign" value="TL" />
  <param name="FlashVars" value="playerMode=embedded" />
</object>

Mas, como mencionei acima, a minha bronca não é com os filmes rodando em Flash — com os quais eu tenho pouca experiência — é com os filmes em QuickTime e Windows Media Player. Há anos eu venho tentando inserir estes, de uma maneira complacente com as standards, mas até agora não tinha tido sucesso. Recentemente eu descobri que o MIME type permite que você use object para arquivos Windows Media Player (.wmv). Eu mal posso acreditar nesta descoberta.

Eureka! Um object para Windows Media Player

Eu costumo prestar atenção nos erros para extrair ensinamentos. Somente quando eu percebo que fiz algo errado e entendo o porquê do erro é que eu me sinto apta a descobrir os caminhos de fazer a coisa certa. Ao rever a técnica descobri que embora ela funcionasse em filmes no QuickTime (como descrito abaixo), não funciona em filmes no Windows Media Player…no Ópera…em Windows. Eu contive meu primeiro impulso de ignorar isto, e ao procurar uma resposta para o não funcionamento eu descobri que o MIME permite que você use object para arquivo Windows Media Player: video/x-ms-wmv.

Para inserir um arquivo Windows Media Player, você pode usar o segui9nte código (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.)

<object type="video/x-ms-wmv" 
  data="https://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv" 
  width="320" height="260">
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>

Convém notar que para o IE6 e IE7 e Safari (surpreendentemente ombreando com o IE), há necessidade de se definir no código, um elemento param extra:

><object type="video/x-ms-wmv" 
  data="https://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv" 
  width="320" height="260">
  <param name="src" 
    value="https://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv" />
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>

E agora funciona.

Pessoalmente, eu considero uma bela experiência, ou pelo menos um sacrilégio... inserir um filme para Windows Media Player sem uso de classid! (E agora, qual será o próximo? Documentos válidos sem declaração de DOCTYPE?) Eu testei este exemplo nos navegadores IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, e Safari e tudo funcionou perfeitamente. Dito isto, eu acresento que não sou desenvolvedora de scripts ou de matérias voltadas para a Microsoft, assim a sua experiência deve ser diferente da minha. (Nota: É certo que existem muitos outros elementos param que você pode querer usar.)

Inserindo filmes para QuickTime sem uso de embed

Infelizmente eu ainda estou plenamente convencida de que não há qualquer type capaz de fazer com que o IE abra um filme para QuickTime sem usar um controle ActiveX. A escolha óbvia, type="video/quicktime" ou mesmo type="application/x-quicktime", funciona somente em navegadores standards. Assim eu fui buscar um novo caminho.

Algumas premissas básicas

Esta técnica baseia-se em algumas premissas:

  • Primeiro, o elemento object é projetado para ser aninhado de modo a ajudar os navegadores a "degradar graciosamente". Se um navegador não for capaz de renderizar o elemento object mais externo, passa para o seguinte e assim sucessivamente até encontar um que seja capaz de entender e renderizar. Uma vez que o navegador encontre um elemento object que consiga entender e renderizar, ignorará os restantes.
  • Segundo, a maioria dos navegadores atualmente usados suportam o elemento object. A grande exceção é o (surpresa) Internet Explorer. O IE6 renderiza todos os elementos object que encontra, desde que os suporte — até mesmo os aninhados — nestes casos para cada elemento aninhado, renderiza uma imagem "fantasma" do objeto. Grato ao IE7 que não mostra estas imagens "fantasma", mas infelizmente desconsidera os elementos aninhados quando encontra problemas com o elemento anterior. Neste caso é reportado um erro.
  • Terceiro, o Internet Explorer (inclusive a versão 7) implementa o elemento object em uma maneira não standard, maneira esta que para os outros navegadores nada significa, sendo por eles ignorada.

Eu acredito que a resposta pode ser encontrada no sistema de comentários condicionais. (NT: Tutorial em português sobre comentários condicionais) Eu tomei conhecimento disto quando o pessoal começou a fazer experiências para descobrir como lidar com o IE7 e seu suporte para as CSS. Se comentários condicionais se prestam para servir exclusivamente aos IEs (leia: código proprietário), poderiam ser usados para negar o elemento object. Um casamento perfeito.

Inserindo QuickTime para o Internet Explorer

Vou considerar o QuickTime para exemplificar, mas você pode usar esta técnica para filmes em Windows Media Player com o atributo classid como mostrarei adiante.

Para inserir filmes QuickTime no Internet Explorer, usaremos um código como mostrado a seguir (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.):

<object classid="clsid:02BF25D5-8C17-4B23-BC80 »
-D3488ABDDC6B" 
  codebase="https://www.apple.com/qtactivex/qtplugin.cab" 
  width="320" height="256">
  <param name="src" 
    value="https://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
</object>

Não se esqueça de declarar height, width e o horroroso classid que chama o controle ActiveX para QuickTime. Notar que o elemento param que especifica a URI do filme usa o atributo name attribute da “src,” e não “url” ou “movie.”

Você pode ver o efeito deste código aqui. No IE, você verá um filme, nos outros navegadores não verá nada.

Inserindo QuickTime para os demais

Embora os navegadores standard não consigam renderizar o elemento object quando está presente o atributo classid com aquele seu cabalístico número em vez de uma URL, eles irão procurar por elementos object aninhados até encontrar um que consigam renderizar.

Assim, imediatamente antes da tag de fechamento</object>, iremos inserir a implementação standard do elemento object (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.):

<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B" 
  codebase="https://www.apple.com/qtactivex/qtplugin.cab" 
  width="320" height="256">
  <param name="src" 
    value="https://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
  <object type="video/quicktime" 
    data="https://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" 
    width="320" height="256">
    <param name="autoplay" value="false" />
    <param name="controller" value="true" />
  </object>
</object>

Os atributos width e height são mandatórios, assim como o atributo type.

Se você abrir este código combinado em um navegador standard, agora sim, podemos comemorar, funcionou!. IE 6 (e anteriores), como já frisamos anteriormente, não saberão o que fazer com o segundo elemento object e renderizam uma área " fantasma" para este objeto.

O IE não faz asneira com que ele não vê

Embora oa comentários condicionais para os IEs tenham sido desenvolvidos com o propósito questionável de servir código exclusivamente para eles, escondendo de outros navegadores, nós usaremos com a finalidae inversa, ou seja, esconder código dos IEs e servir para outros navegadores. (Isto soa com um tapa na cara da Microsoft — ainda que não seja surpresa — que tem a ousadia de referir-se aos outros navegadores como de “segunda linha”.)

Comentários Microsoft escritos com a “sintaxe original ” não validam (surpresa), mas muito obrigado a Lachlan Hunt que descobriu um meio de ajustar a sintaxe para validar.

Precisamos esconder o segundo elemento object do IE com uso de comentários condicionais. Insira <!--[if !IE]>--> antes da tag <object> do segundo elemento e <!--<![endif]--> logo após a sua tag de fechamento </object>. (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.):

<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B" 
  codebase="https://www.apple.com/qtactivex/qtplugin.cab" 
  width="320" height="260">
  <param name="src" 
    value="https://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
  <!--[if !IE]>-->
  <object type="video/quicktime" 
    data="https://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" 
    width="320" height="260">
    <param name="autoplay" value="false" />
    <param name="controller" value="true" />
  </object>
  <!--<![endif]-->
</object>

Agora sim maravilha!

Complementarmente você pode usar toda a coleção de parâmetros disponíveis para o elemento object como descrito no site de desenvolvimento da Apple.

Da próxima vez eu irei fazer meus testes usando um filme com som um pouco melhor.

Os detalhes para o Windows Media Player

Se você pretende inserir arquivos Windows Media Playercom uso de classid e não via o método um-object como mmostrei no início deste artigo, o código é um pouco diferente. Para o classid na tag inicial do elemento object, use classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6". para especificar a URL do filme Windows Media Player use o elemento param com o atributo name igual à “url” para servir a maioria dos navegadores e a seguir repita o value usando o atributo name igual a “src” para servir o Safari.

Então, na segunda implementação do elemento object, para servir navegadores standards, use o mesmo código do método um-object.

Aqui você pode ver um exemplo (No código a seguir quebras de linha foram marcadas com um símbolo » —Ed.):

<object classid="CLSID:6BF52A52-394A-11d3-B153- »
00C04F79FAA6" 
  id="player" width="320" height="260">
  <param name="url" 
    value="https://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
  <param name="src" 
    value="https://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
  <param name="showcontrols" value="true" />
  <param name="autostart" value="true" />
  <!--[if !IE]>-->
  <object type="video/x-ms-wmv" 
    data="https://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" 
    width="320" height="260">
    <param name="src" 
      value="https://www.sarahsnotecards.com/ »
catalunyalive/fishstore.wmv" />
    <param name="autostart" value="true" />
    <param name="controller" value="true" />
  </object>
  <!--<![endif]-->
</object>

Um jeitinho

Em janeiro de 2006 a Apple começou a incentivar o uso de JavaScript para "chamar" filmes nas páginas web sem que os usuários tivessem que clicar em controles ActiveX para rodá-los. Isto é uma história longa e enrrolada que começou com uma briga judicial Microsoft e acabou por dificultar a vida para todos nós. No final das contas os métodos descritos acima funcionam perfeitamente sem uso de JavaScript com uma ressalva: os filmes QuickTime não acionam a função autoplay no IE. Eu não estou segura e gostaria de ver um exemplo de vídeo com autoplay! Não obstante eu considero altamente suspeito que os arquivos Windows Media Player carreguem em background e acionem autoplay sem qualquer interação e que filmes QuickTime mostrem apenas o primeiro quadro enquanto o áudio toca e o filme não roda.

De qualquer modo, eu quero ver como ativando o controle ActiveX isto vai rodar dependente de uma implementação trabalhosa de uma solução JavaScript para meu site todo. eu uso muito pouco JavaScript e gostaria de manter isto bem longe.

Escolha você ou não o caminho via JavaScript isto é irrelevante para o escopo deste artigo. Ambos os caminhos, permitem a vocêe evitar o uso da tag embed para o elemento standard, object.

Eu bem que tentei descobrir uma forma de esconder elementos object aninhados somente para o IE 6 e anteriores, uma vez que o IE 7 (pelo menos a versão beta 2) trata de maneira apropriada os elementos object aninhados, contudo não tive sucesso nas minhas pesquisas. Embora isto possa ser feito com comentários condicionais (<!--[if gte IE 7]>-->), os caracteres extras(-->) descobertos por Lachlan para validar os comentários, serão visualizados pelo IE7 (como era de se esperar). Alguma idéia?

No rastro dos precurssores

Outras pessoas já trabalharam e pesquisaram este problema. Este artigo concorda com a idéia de que dois elementos object aninhados deve funcionar, mas se utiliza de um método que eu considero complicado para esconder o segundo elemento. Faz isto via CSS.

Ian Hickson usou os comentários condicionais para o IE para esconder o segundo object do IE, com conteúdoFlash.

E o já mencionado, Lachlan Hunt descobriu a forma válida de escrever comentários condicionais para oa demais navegadores e esconder para o IE.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo