Design Gráfico para Web: HTML 5 - Multimídia

2. O QUE É MULTIMÍDIA?
Multimídia pode ser quase qualquer coisa que você
pode ouvir ou ver.
Exemplos: Fotos, música, som, vídeos, discos, filmes,
animações e muito mais.
Páginas da Web muitas vezes contêm elementos
multimídia de diferentes tipos e formatos.

3. SUPORTE NAVEGADOR
Os primeiros navegadores tinham suporte para apenas texto, limitados a uma
única fonte, em uma única cor, posteriormente, veio navegadores com suporte
para cores e fontes, e até mesmo suporte para imagens!
O suporte para sons, animações e vídeos é tratada de forma diferente por vários
navegadores. Diferentes tipos e formatos são suportados, e alguns formatos
requerem programas auxiliares adicionais (plug-ins) para o trabalho.

4. Formatos Multimídia
Elementos multimídia (como sons ou vídeos) são armazenados em arquivos de mídia.
A maneira mais comum para descobrir o tipo de um arquivo, é olhar para a extensão do
arquivo. Quando um navegador vê o arquivo de extensão .htm ou .html, ele vai tratar
o arquivo como um arquivo HTML. A extensão .xml indica um arquivo XML, e a
extensão .css indica um arquivo de folha de estilo. Fotos são reconhecidos por
extensões como .gif, .jpg e .png.
Arquivos multimídia também têm seus próprios formatos e diferentes extensões como:
.swf, .wav, .mp3, .mp4, .mpg, .wmv, e .avi.

5. MP4 é um excelente formato para vídeo para a
Internet sendo a extensão recomendada pelo
YouTube.
O MP4 é suportado pelo Flash e pelo HTML5.

6. Formato Arquivo Descrição
MIDI .mid
.midi
MIDI (Musical Instrument Digital Interface) . Formato principal para todos os
dispositivos de música eletrônica como sintetizadores e placas de som PC. Os
arquivos MIDI não contêm som, mas notas digitais que podem ser reproduzidas por
aparelhos eletrônicos. Roda bem em todos os computadores e hardwares de
música, mas não em navegadores web.
RealAudio .rm
.ram
RealAudio . Desenvolvido pela Real Media para permitir streaming de áudio de com
baixas larguras de banda . Não joga em navegadores web .
WMA .wma WMA (Windows Media Audio). Desenvolvido pela Microsoft. Comumente usado
em tocadores de música. Roda bem em computadores com Windows, mas não em
navegadores web.
AAC .aac AAC (Advanced Audio Coding). Desenvolvido pela Apple como formato padrão
para o iTunes. Roda bem em computadores da Apple, mas não em navegadores
web.
WAV .wav WAV. Desenvolvido pela IBM e Microsoft. Roda bem em sistemas operacionais
Windows, Macintosh e Linux e suporta HTML5.
Ogg .ogg Ogg . Desenvolvido pela Fundação Xiph.Org . Suporta HTML5.
MP3 .mp3 Arquivos MP3 são realmente parte de som de arquivos MPEG. MP3 é o formato
mais popular para tocadores de música. Combina boa compressão (arquivos
pequenos) com alta qualidade. Suportado por todos os browsers.
MP4 .mp4 MP4 é um formato de vídeo, mas pode também ser usado para o áudio . Vídeo
MP4 é o formato de vídeo mais popular da internet. É suportado por todos os
navegadores .

7. O HTML elemento <video>
Para mostrar um vídeo em HTML, use o <video>:

8. https://mega.nz/#F!ldFymbYZ!HZkPPReIwGbnuKauCkWkvg

10. Reprodução de vídeos em HTML
Antes do HTML5, não havia nenhum tipo de padrão para exibição de vídeos em uma
página da web. Os vídeos só poderiam ser executados com um plug-in (como flash).
O HTML5 elemento <video>especifica uma forma padrão de inserir um vídeo em uma
página web.

11. SUPORTE NAVEGADOR
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o
elemento <video>.

12. COMO FUNCIONA
Os controles atribuem e adicionam controles de vídeo, como play, pause e volume.
É uma boa ideia incluir sempre os atributos de largura e altura.
Se a altura e a largura não estão definidas, o navegador não sabe o tamanho do vídeo. O efeito
será que a página irá mudar, enquanto as cargas de vídeo.
Texto entre o <video> e </ video> só vai exibir em navegadores que não suportam o elemento
<video>.
Vários elementos <source> podem conectar-se a diferentes arquivos de vídeo. O navegador
irá usar o primeiro formato reconhecido.

13. HTML <video> Autoplay
Para iniciar um vídeo e usar automaticamente o atributo autoplay:
https://mega.nz/#F!ERE11RKD!68M3Ks9BMKaKqQjL3rcjXw

14. HTML Video - Compatibilidade de navegador
Atualmente, existem 3 formatos de vídeo suportados para o elemento <video>: MP4, WebM,
e Ogg:
MP4 = MPEG 4 arquivos com codec de vídeo H264 e codec de áudio AAC
WebM = WebM com codec de vídeo VP8 codec de áudio Vorbis e
Ogg = Ogg com codec Theora de vídeo e áudio Vorbis codec

15. HTML Video - Tipos de mídia

16. HTML Video - Métodos, propriedades e eventos
HTML5 define métodos DOM, propriedades e eventos para o elemento <video>.
Isso permite carregar, tocar, e pausar vídeos, bem como definir a duração e volume.
Há também eventos DOM que podem notificá-lo quando um vídeo começar a tocar, estiver em
pausa, etc.
Parte do código:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="video1" width="420">
<source src="Tove Lo - Habits (Stay High).mp4" type="video/mp4">
</video>
</div>

17. https://mega.nz/#F!4Q0WWIAb!JO4yiF8XMghTG2K22Zy75w
JavaScript

18. HTML5 Video Tags
TAG DESCRIÇÃO
<video> Define um vídeo ou filme
<source> Define vários recursos de mídia para os elementos como
<video> e <audio>
<track> Define faixas de texto em players de mídia

19. Atributos opcionais
ATRIBUTO VALOR DESCRIÇÃO
autoplay autoplay Especifica que o vídeo começará a ser reproduzido assim que ele está pronto
controls controls Especifica que os controles de vídeo deve ser exibido (como um botão de play /
pause etc).
height pixels Define a altura do player de vídeo.
loop loop Especifica que o vídeo vai começar tudo de novo, cada vez que ele for concluído
muted muted Especifica que a saída de áudio do vídeo deve ser silenciado.
poster URL Especifica uma imagem a ser mostrada enquanto o vídeo está baixando, ou até
que o usuário pressiona a tecla do jogo.
preload auto
metadata
none
Especifica se e como o autor pensa que o vídeo deve ser carregadO quando a
página carrega
src URL Especifica a URL do arquivo de vídeo
width pixels Define a largura do player de vídeo.

20. ATRIBUTOS GLOBAIS
A tag <video> também suporta Atributos globais em HTML
Atributos de Eventos
A tag <video> também apoia a Atributos de Eventos em HTML.
Páginas relacionadas
HTML DOM referência: HTML Áudio / Vídeo DOM Reference

21. O HTML <audio>
Para reproduzir um arquivo de áudio em HTML, use o <audio> elemento:
https://mega.nz/#F!0FlkDL5T!Une73qkoInLbYU952walCw

22. HTML de áudio - Como Funciona
Os controles atribuem adiciona controles de áudio, como play, pause e volume.
Texto entre o <audio> e </ audio> marcas serão exibidas em browsers que não suportam o <audio>
elemento.
Várias <source> elementos podem conectar-se a diferentes arquivos de áudio. O navegador irá usar o
primeiro formato reconhecido.

23. HTML de áudio - Compatibilidade de navegador
Atualmente, existem 3 formatos de arquivos suportados para o <audio> elemento: MP3,
WAV e OGG:

24. HTML de áudio - Tipos de mídia

25. HTML de áudio - Métodos, propriedades e eventos
HTML5 define métodos DOM, propriedades e eventos para o <audio> elemento.
Isso permite que você carregue, play, pause e áudios, bem como a duração e volume
definido.
Há também eventos DOM que podem notificá-lo quando um áudio começa a tocar, esteja
em pausa, etc.

26. HTML5 Audio Tags
TAG
<audio> Define o conteúdo de som
<source> Define vários recursos de mídia para os elementos,
como <video> e <audio>