Material de apoio voltado ao curso de HTML 5. Referências e aplicações de tags Formatos de vídeo e áudio para web HTML 5

1. Curso de HTML
Por: Dorival Silva
Aula 03

2. HTML Multimídia
O que é multimídia?
Multimídia vem em muitos formatos diferentes. Pode
ser quase qualquer coisa que você pode ouvir ou ver.
Exemplos: Fotos, música, som, vídeos, filmes,
animações...
Páginas da Web muitas vezes contém elementos
multimídia de diferentes tipos e formatos.

3. Formatos de Vídeos
MPEG - .mpg / .mpeg
AVI - .avi
QUICK TIME - .mov
RealVideo - .rm / ram
Falsh - .swf / .flv
Ogg - .ogg
WebM - .webm
MPEG-4 - .mp4

4. Formatos de Audío
MIDI - .mid / .midi
RealAudio - .rm / .ram
WMA - .wma
AAC - .aac
WAV - .wav
OGG - .ogg
MP3 - .mp3
MP4 - .mp4

5. Elemento Vídeo
Para exibir um vídeo em HTML use o elemento
<video>
<video width=“480" height=“270" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Epa! Seu browser não suporta HTML 5. :’(
</video>

6. Elemento Vídeo
<video> - Define um vídeo ou filme
<source> - Define vários recursos para
elementos de mídia
<track> - Define faixa de texto (legenda) para
tocadores (players)

7. Legenda / Letra
<video width="320" height="240" controls>
<source src=“video.mp4" type="video/mp4">
<source src=“video.ogg" type="video/ogg">
<track src=“leg_pt.vtt" kind="subtitles" srclang=“pt" la
bel=“Portugês">
<track src=“leg_en.vtt" kind="subtitles" srclang=“en" l
abel=“Inglês">
</video>

8. Elemento Áudio
Para tocar um áudio em HTML use o elemento
<audio>
<audio controls>
<source src=“som.mp3" type=“audio/mp3">
<source src=“som.ogg" type=“audio/ogg">
Epa! Seu browser não suporta HTML 5. :’(
</audio>

9. “Tá me ouvindo?”
O elemento <audio> suporta: MP3, WAV e OGG
NAVEGADOR MP3 WAV OGG
Chrome Sim Sim sim
Safari Sim Sim Não
Firefox Sim Sim Sim
Opera Sim Sim sim
I.E. Sim Não Não

10. E o Youtube?
Para exibir um vídeo em sua página pode ser
necessário converte-lo.
Tal tarefa requer tempo e ou ainda algumas
habilidades.
Uma solução rápida e fácil é permitir que o
Youtube faça a reprodução em sua página...

11. Use o iframe
<iframe width="420" height="315"
src="http://youtu.be/tem1JqnoKXs?
list=UUjthHwakcljMhFNEFJKjwQQ">
</iframe>