Upload
dorival-silva
View
252
Download
0
Embed Size (px)
Citation preview
Curso de HTML
Por: Dorival Silva
Aula 03
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.
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
Formatos de Audío
MIDI - .mid / .midi
RealAudio - .rm / .ram
WMA - .wma
AAC - .aac
WAV - .wav
OGG - .ogg
MP3 - .mp3
MP4 - .mp4
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>
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)
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" label=“Portugês"> <track src=“leg_en.vtt" kind="subtitles" srclang=“en" label=“Inglês"></video>
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>
“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
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...
Use o iframe
<iframe width="420" height="315"src="http://youtu.be/tem1JqnoKXs?list=UUjthHwakcljMhFNEFJKjwQQ"></iframe>