Há aproximadamente 2 anos, os desenvolvedores web tiveram uma grande (ou não) dor de cabeça quando a Microsoft perdeu uma disputa judicial contra uma empresa americana, chamada Eolas, a qual patenteou – simplificando o assunto – o carregamento de um plugin em um documento hipertexto. Com isso, as versões atualizadas do IE7 de lá pra cá pedem para que o usuário clique no flash para que ele comece a ser reproduzido, causando umd esconforto na experiência do usuário.
De lá pra cá, muito já se discutiu sobre como contornar essa questão, e muitas soluções já foram expostas. As mais conhecidas se baseiam em inserir o flash via javascript (e não mais escrevendo diretamente no html as tags object e embed), e com isso a tal questão do "Clique aqui para ativar" é contornada.
No começo, usava-se muito uma biblioteca javascript chamada dynActiveX.js. Depois, uma outra chamada SWFObject ficou conhecida e foi adotada pela maior parte da comunidade de desenvolvedores (vejo por aí alguns projetos que usam um plugin da jQuery para isso. Me parece uma boa também).
Uma outra vantagem de utilizar essa forma de inserir flash no seu html é que você não precisa se preocupar com todas as formalidades que a tag object necessita, nem ter que ficara duplicando todo o código dentro da tag embed (para que os browsers gecko entendem). Ou seja, write once, work always 🙂
A versão 2.0 da SWFObject foi lançada alguns meses atrás; se você usava a 1.x, terá que mudar a forma de escrever seu código. Você pode fazer o download direto do Google Code aqui.
*aproveito e deixo a dica de ler um pouco a respeito do Google Code e da Ajax Libraries aqui
Como utilizar?
Depois de fazer download do arquivo, você pode usar esse código mínimo como exemplo:
<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent">
Esse btexto é substituído pelo Flash
</div>
<script type="text/javascript">
var so = new SWFObject("movie.swf", "meuflashvideo", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>
</body>
</html>
O que é feito, basicamente, é que o javascript insere dentro da div com id="flashcontent" o código necessário para inserir o flash troca a div com o id="flashcontent" pelo código necessário para inserir o flash (obrigado @rulico pela correção, na 1.x é que funcionava dessa outra forma!).
Segundo a documentação do SWFObject, você pode parametrizar o flash da seguinte forma:
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl]);
Onde:
- swf: é o caminho do arquivo .swf
- id: id do objeto, para tratamento javascript
- width: largura do swf
- height: altura do swf
- version: versão necessária do Flash Player necessária (ver a documentação oficial para mais detalhes)
- background-color: cor de fundo do Flash, em hexadecimal
Existem ainda os parâmetros opcionais:
- quality: a qualidade que deve ser usada. Por padrão, é usado o valor high
- xiRedirectUrl: url para onde o usuário que fez o download do flash player pelo Expressinstall
- redirectUrl: use se você quise redirecionar o usuário que não tem a versão correta do flash player para alguma página
Definindo outros atributos e passando variáveis
Caso seja necessário, você pode definir outros atributos usando o método setAttribute. A sintaze é a seguinte:
so.setAttribute("parametro", "valor");
Você pode passar quantos atributos quiser, é só replicar esse código.
Pode ser necessário também passar variáveis para o seu flash. Siga o seguinte código como base:
so.addVariable("nome da variável", "valor");
Qualquer coisa, vejam na documentação oficial um how-to com todos os detalhes e um FAQ bem completo a respeito 🙂
[update]Gerador de código para inserir o SWFObject (by @rulico): http://www.swffix.org/swfobject/generator/[/update]