html5 básico: multimídia 2 (aula 4)
TRANSCRIPT
Aula 4:
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
<source /><audio controls=“true” >
<source src=“musica.mp3” type=“audio/mpeg” />
</audio>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
testes
Cross-Browser
prof. Gustavo Zimmermann | [email protected]
BROWSER MP3 WAV OGG
YES YES YES
YES NO NO
NO YES YES
YES YES NO
NO YES YES
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
Formatos
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
format mime-typeMP3: Ogg: Wav:
<audio controls=“true” >
<source src=“musica.mp3” type=“audio/mpeg” />
<source src=“musica.ogg” type=“audio/ogg” />
<source src=“musica.wav” type=“audio/wav” />
Desculpe, mas o seu nevegador não suporta Audio em HTML5. Atualize o seu navegador.
</audio>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Conversor Online de
Áudio
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <audio></audio>
Atributos autoplay:
controls:
loop:
muted:
preload:
auto:
metadata:
none:
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <video></video>
<source /><video width=“360” height=“240” controls=“true” >
<source src=“video.mp4” type=“video/mp4 />
</ video>
prof. Gustavo Zimmermann | [email protected]
BROWSER MP4 WEBM OGG
YES YES YES
YES NO NO
YES YES YES
YES NO NO
NO YES YES
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Formatos
Definições <video></video>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
format mime-typeMP4: WebM: Ogg:
<video controls=“true” >
<source src=“filme.mp4” type=“video/mp4/>
<source src=“filme.webm” type=“video/webm/>
<source src=“filme.ogg” type=“video/ogg/>
Desculpe, mas o seu nevegador não suporta Vídeo em HTML5. Atualize o seu navegador.
</video>
Definições <video></video>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Conversor Online de
Vídeo\
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Definições <video></video>
track<video width="320" height="240" controls=“true”>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" lab
el="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" lab
el="Norwegian">
</video>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Codecs
source
codecs
type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
Elementos Áudio e Vídeo e Codecs
Codecs
source
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240,
mp4a.40.2"'>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
width e height<svg width=“400” height=“400”></svg>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
<rect />
<rect x="10" y="10" width="150" height="50"
stroke="#000000" stroke-width="5" fill="#FF0000" />
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
<circle />
<circle cx="70" cy="240" r="60" stroke="#00FF00"
stroke-width="5" fill="#FFFFFF" />
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Definições <svg></svg>
<polygon />
<polygon fill="red" stroke="blue" stroke-width="10"
points="250,75 279,161 369,161 297,215
323,301 250,250 177,301 203,215
131,161 221,161" />
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Exemplo<svg width="400" height="400">
<!-- Circulo Amarelo -->
<circle cx="200" cy="200" r="200" fill="yellow" />
<!-- Sorriso -->
<circle cx="200" cy="220" r="140" fill="#000" />
<!-- "Corte" -->
<circle cx="200" cy="200" r="145" fill="yellow" />
<!-- Olho esquerdo -->
<circle cx="130" cy="145" r="25" fill="#000" />
<!-- Olho Direito -->
<rect x="230" y="140" width="65" height="20" fill="#000" />
</svg>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 2
SVG
Arquivo SVG <img src=“imagem.svg” />
Artigo SVG:
