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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Vídeos com HTML 5</title> 
 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
</head>
 
<body>
<div class="container">
<div class="row">
	<h2>Vídeo do Youtube</h2>
	<hr>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/S1CvQnBO6zk" frameborder="0" allowfullscreen></iframe>
 
</div>
</div>
</body>
</html>

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;

MP4 video/mp4
WebM video/webm
Ogg video/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 Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Vídeos com HTML 5</title> 
 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
</head>
 
<body>
<div class="container">
<div class="row">
	<h2>Vídeo do Youtube</h2>
	<hr>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/S1CvQnBO6zk" frameborder="0" allowfullscreen></iframe>
 
	<h2>Elemento video </h2>
	<hr>
	<video width="560" height="315" controls>
	  <source src="videos/meu_video.mp4" type="video/mp4">
	  Seu navegador não suporta vídeos.
	</video>	
 
	<h2>Elemento audio </h2>
	<hr>
	<audio controls>
		<source src="musicas/musica001.mp3" type="audio/mpeg">
		Seu navegador não suporta áudio.
	</audio>
 
</div>
</div>
</body>
</html>

Deixe seu comentário