Recursos de Multimidia html (muito bom para blogueiros)

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.
  
  
  
  
  
  
  
  
  
  
  
  
  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.
  

  
  
  

  #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
  
  
  
  
  #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
  
  
  
  
  #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:
  
  
  
  
  #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.

   

 »

Leia mais »»