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!!!
Resultado do primeiro exemploResultado:
Explicando o exemploNo 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">
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ídeoCopie 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
Inserindo animações em FlashAs 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 anteriorConsideração sobre a inserção de animações
Alterando o último exemploObserve 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ídiaTudo 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.
0 comentários: sobre Recursos de Multimidia html (muito bom para blogueiros)
Postar um comentário para Recursos de Multimidia html (muito bom para blogueiros):