11
Curso de HTML Por: Dorival Silva Aula 03

Aula3 HTML 5 - Multimídia

Embed Size (px)

Citation preview

Page 1: Aula3 HTML 5 - Multimídia

Curso de HTML

Por: Dorival Silva

Aula 03

Page 2: Aula3 HTML 5 - Multimídia

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.

Page 3: Aula3 HTML 5 - Multimídia

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

Page 4: Aula3 HTML 5 - Multimídia

Formatos de Audío

MIDI - .mid / .midi

RealAudio - .rm / .ram

WMA - .wma

AAC - .aac

WAV - .wav

OGG - .ogg

MP3 - .mp3

MP4 - .mp4

Page 5: Aula3 HTML 5 - Multimídia

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>

Page 6: Aula3 HTML 5 - Multimídia

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)

Page 7: Aula3 HTML 5 - Multimídia

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>

Page 8: Aula3 HTML 5 - Multimídia

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>

Page 9: Aula3 HTML 5 - Multimídia

“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

Page 10: Aula3 HTML 5 - Multimídia

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

Page 11: Aula3 HTML 5 - Multimídia

Use o iframe

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