Trabalhando com vídeos e áudio no HTML 5

A Multimídia foi um dos fatores decisivos para a popularização da Internet, principalmente com o desenvolvimento dos arquivos Mp3 e MPeG e depois o AVI.

O HTML 5 oferece uma excelente forma de incorporar estes elementos multimídia em sua página.

Incorporando vídeos do Youtube

Em uma garagem de San Francisco (Califórnia, EUA), em fevereiro de 2005. Lá, os funcionários de uma empresa de tecnologia Chad Hurley e Steve Chen, hoje com 29 e 27 anos, respectivamente, iniciaram a criação de um programa de computador para dividir vídeos com os amigos. Cerca de 20 meses depois, a invenção foi comprada por US$ 1,65 bilhão pelo Google, que também começou em uma garagem de San Francisco há oito anos.  (fonte G1).

O Youtube oferece o recurso de incorporar vídeos através de um código HTML.

  1. Acesse o Youtube e escolha o vídeo de sua preferência
  2. Clique em Compartilhar, em seguida na aba Incorporar como mostra na imagem;IncorporarVideosDoYoutube
  3. Copie o código selecionado e cole na página HTML.

Exemplo:




  
    
  Vídeos com HTML 5 

	
	%MINIFYHTML6adf79dbaf523bcf1f0ca6b985e12e9a3%


Vídeo do Youtube


%MINIFYHTML6adf79dbaf523bcf1f0ca6b985e12e9a4%

Usando o elemento <video>

Suponhamos agora que você tenha um vídeo seu, mas não deseja publicá-lo no Youtube. Você pode incorporar o seu próprio vídeo usando o elemento <video>. O processo é igual ao da imagem.

    1. Crie uma pasta chamada videos (sem acento) junto com os seus arquivos html.
    2. Salve seu vídeo na pasta que acabou de criar.
    3. Acrescente o seguinte código em sua página HTML
      <video controls="controls" width="500" height="300">
       <source src="video/meu_video.mp4" type="video/mp4" />
       Seu navegador não suporta vídeos.
      </video>

Os formatos dos vídeos podem ser Mp4, OGG ou WebM, de modo que o atributo type do código siga a seguinte tabela;

MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Se seu vídeo não estiver nem nenhum destes 3 formatos de arquivo, você terá que converte-lo. o HandBrake é uma boa opção e á gratuito.

Criando uma playlist de vídeos.

Se você quiser exibir vários vídeos em sequencia;

<video controls="controls" width="500" height="300">
 <source src="video/video001.mp4" type="video/mp4" />
 <source src="video/video002.mp4" type="video/mp4" />
 <source src="video/video003.mp4" type="video/mp4" />
 Seu navegador não suporta vídeos.
</video>

AutoPlay e controles

O atributo autoplay executa o vídeo automaticamente junto com a página, e o atributo controls permite que usuário avance, volte e pause  vídeo.

<video controls="controls" width="500" height="300" autoplay controls>

Incorporando áudio

Para incorporar áudio, o processo é o mesmo do vídeo. Os formatos suportados são .ogg, mp3 e WAV.

File FormatMedia Type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

O código de exemplo;

<audio controls>
  <source src="musica001.mp3" type="audio/mpeg">
  <source src="musica002.mp3" type="audio/mpeg">
  Seu navegador não suporta áudio.
</audio>

Saiba como baixar vídeos e músicas do Youtube.

Veja a aula aqui.

O código completo com todos os exemplos ficaria assim;




  
    
  Vídeos com HTML 5 

	
	%MINIFYHTML6adf79dbaf523bcf1f0ca6b985e12e9a5%


Vídeo do Youtube


Elemento video


Elemento audio


Deixe seu comentário