Introdução

A atratividade da Internet se deve, em certa parte, às inúmeras formas de informação que podem ser expressas através de recursos multimídia.

Sons ou músicas, vídeos e animações em Flash são amplamente utilizadas para a disseminação de conteúdo na rede. Embora seu uso acrescente certo peso no carregamento das páginas, se feito com simplicidade e adequação aos objetivos do site, torna-se uma solução interessante.

Os arquivos de som e vídeo são, geralmente, muito grandes, o que torna demorado o seu carregamento no navegador do usuário. Por isso, é comum em algumas páginas que esses arquivos não sejam carregados automaticamente, mas, através de um link específico, para que o internauta escolha se quer ou não acessá-lo. A inserção desses elementos em uma página é relativamente simples e neste capítulo aprenderemos como fazê-la.

Inserindo áudio

O uso de sons e músicas em uma página é limitado, havendo dois formatos básicos como padrão: Wav e Midi. Contudo, hoje sabemos que o uso de áudio na web não segue exclusivamente esses dois padrões. Rádios online, mp3 e outras tecnologias fazem parte do universo de possibilidades, mas estas necessitam de maior conhecimento e de outras linguagens para auxiliar na sua utilização.

O que faremos aqui será a declaração de um elemento que fará o carregamento e o controle de execução de um arquivo de mídia. A tag para esta tarefa é a

Propriedades da tag

Propriedades de

src – aqui declaramos o arquivo de mídia (no caso, 'wav' ou 'midi') que será carregado.
autostart – podemos definir com esta propriedade se o arquivo será executado automaticamente pela página logo após o seu carregamento. Em caso afirmativo, o declaramos como true. Caso contrário, o usuário terá a opção de iniciar a execução quando ele quiser, e o atributo será definido como false.
loop – define quantas vezes a mídia será repetida.
hidden – define se o controle de execução será visível ao usuário. Se for visível, o valor de hidden será false; se não for visível, true. Lembre-se de colocar a propriedade autostart como true, caso deseje um controle invisível.
width – se o controle for visível, podemos definir qual será o tamanho que ele ocupará na tela. Com "width" definimos a largura do controle, de preferência em pixels.
height – da mesma forma que a propriedade anterior, definimos a altura do controle de execução com esta propriedade.
Primeiro exemplo Procure o arquivo flourish.mid e copie-o para o seu diretório de trabalho para iniciarmos o exercício a seguir.

Trabalhando com áudio!!!

Link para baixar o arquivo flourish.mid: flourish.mid.

Resultado do primeiro exemplo

Resultado:

Explicando o exemplo

No exercício acima, definimos um elemento de áudio, que deverá ser inicializado pelo usuário. Observe o status false da propriedade autostart. Controles de play, pause, stop e até volume serão exibidos para o usuário decidir como quer que seja executado, uma vez que a propriedade hidden também está com status false.
Vamos mudar um pouco a declaração de código para que o arquivo execute no momento em que a página for carregada. Os controles também não estarão disponíveis para o usuário.

Trabalhando com áudio!!!

#FFFFCC">

flourish.mid" autostart="true" loop="2" hidden="true">

Repare que "loop" recebeu o valor "2", definindo que esta mídia será executada duas vezes. Repare também que os controles encontram-se invisíveis, dando a impressão de que não há nada na página (no próximo tópico há uma captura de tela).

Observe o resultado do código anterior:

Inserindo vídeo

Além do uso de sons pela rede, temos também a possibilidade de inserir vídeos em nossas páginas. Atualmente, tornou-se possível até assistirmos televisão pela web.

O uso de vídeos também tem suas limitações quanto ao formato. Devem ser utilizados padrões que possam ser lidos na web, como o formato mpeg. Se forem utilizados outros (como avi e mov), deverá existir na máquina cliente algum programa que possa ler e executar estes arquivos.

A tag para o uso de vídeos pela rede é a mesma que usamos para a inserção de sons: . As propriedades também são idênticas, exceto pelo fato de não podermos atribuir à propriedade hidden o valor true. Caso façamos isso, estaremos ocultando o controle de execução e consequentemente não veremos as imagens.

Exemplo - Inserindo vídeo

Copie o arquivo clock.avi para a pasta de trabalho que esteja utilizando e escreva o exercício abaixo:
link: clock.avi

Trabalhando com vídeo!!!

#FFFFCC">

clock.avi" autostart="true">

Resultado do exemplo anterior

Caso as propriedades de tamanho sejam omitidas, prevalecerá o tamanho original do arquivo de vídeo. Cuidado para não definir estas propriedades com tamanho inferior ao original.

Inserindo animações em Flash

As animações em Flash são a grande onda do momento. Podem ser desenvolvidas desde animações de apresentação do site até sites completos com essa ferramenta.

De fato o Flash é muito atrativo, mas caímos novamente no detalhe do peso da página. Assim como sons e vídeos, ele pode se tornar um inconveniente, caso não seja usado corretamente. A sintaxe é idêntica ao uso dos elementos multimídia que usamos até o momento.
Copiem o arquivo bannerminicursos.swf para o seu diretório de trabalho e codifiquem o exercício abaixo:
link: bannerminicursos.swf

Trabalhando com Flash!!!

#FFFFCC">

bannerminicursos.swf" width="200" height="358">

OBS: Caso o seu navegador consiga ler o formato SWF a janela de salvar não aparecerá, bastando então clicar com o botão direito em cima do link e depois em "Salvar link como..."

Resultado do exemplo anterior

Consideração sobre a inserção de animações

Quando utilizamos flash em nossas páginas, é necessário que o usuário possua instalado em sua máquina o plugin para a execução das animações. É conveniente acrescentar à tag uma propriedade que armazenará o local de download e o solicitará automaticamente caso não seja identificado sua presença na máquina cliente. Esta propriedade é a pluginspage e deve conter a URL de download do plugin.

Alterando o último exemplo

Observe a declaração do exemplo anterior com esta propriedade:

Trabalhando com Flash!!!

#FFFFCC">

bannerminicursos.swf" width="200" height="358" pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash">

A exibição não é alterada, mas em caso de falha de execução, o link para o plugin é exibido.
onsiderando o uso de multimídia
Tudo isso que acabamos de aprender é muito interessante e com certeza prende a atenção dos usuários, mas deve-se analisar a necessidade de uso desses elementos, uma vez que páginas muito pesadas - que demoram a ser carregadas pelo browser - costumam ser dispensadas antes mesmo de terem seu conteúdo completamente visualizado na tela. Faça suas páginas com simplicidade e criatividade, utilizando apenas os recursos necessários e avaliando os objetivos reais dos visitantes.