Download - Design Gráfico para Web: HTML 5 - Multimídia
![Page 1: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/1.jpg)
DESIGN GRÁFICO PARA WEBHTML 5: Multimídia
Profa. Camila Hamdan – http://www.camilahamdan.net
![Page 2: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/2.jpg)
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.
![Page 3: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/3.jpg)
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.
![Page 4: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/4.jpg)
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.
![Page 5: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/5.jpg)
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.
![Page 6: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/6.jpg)
Formato Arquivo DescriçãoMIDI .mid
.midiMIDI (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 .
![Page 7: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/7.jpg)
O HTML elemento <video>
Para mostrar um vídeo em HTML, use o <video>:
![Page 8: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/8.jpg)
https://mega.nz/#F!ldFymbYZ!HZkPPReIwGbnuKauCkWkvg
![Page 9: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/9.jpg)
![Page 10: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/10.jpg)
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.
![Page 11: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/11.jpg)
SUPORTE NAVEGADOR
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento <video>.
![Page 12: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/12.jpg)
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.
![Page 13: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/13.jpg)
HTML <video> Autoplay
Para iniciar um vídeo e usar automaticamente o atributo autoplay:
https://mega.nz/#F!ERE11RKD!68M3Ks9BMKaKqQjL3rcjXw
![Page 14: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/14.jpg)
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 AACWebM = WebM com codec de vídeo VP8 codec de áudio Vorbis e
Ogg = Ogg com codec Theora de vídeo e áudio Vorbis codec
![Page 15: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/15.jpg)
HTML Video - Tipos de mídia
![Page 16: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/16.jpg)
HTML Video - Métodos, propriedades e eventosHTML5 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>
![Page 17: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/17.jpg)
https://mega.nz/#F!4Q0WWIAb!JO4yiF8XMghTG2K22Zy75w
JavaScript
![Page 18: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/18.jpg)
HTML5 Video TagsTAG 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
![Page 19: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/19.jpg)
Atributos opcionaisATRIBUTO VALOR DESCRIÇÃOautoplay 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 autometadatanone
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.
![Page 20: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/20.jpg)
ATRIBUTOS GLOBAIS
A tag <video> também suporta Atributos globais em HTML
Atributos de EventosA tag <video> também apoia a Atributos de Eventos em HTML.
Páginas relacionadasHTML DOM referência: HTML Áudio / Vídeo DOM Reference
![Page 21: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/21.jpg)
O HTML <audio>
Para reproduzir um arquivo de áudio em HTML, use o <audio> elemento:
https://mega.nz/#F!0FlkDL5T!Une73qkoInLbYU952walCw
![Page 22: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/22.jpg)
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.
![Page 23: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/23.jpg)
HTML de áudio - Compatibilidade de navegadorAtualmente, existem 3 formatos de arquivos suportados para o <audio> elemento: MP3, WAV e OGG:
![Page 24: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/24.jpg)
HTML de áudio - Tipos de mídia
![Page 25: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/25.jpg)
HTML de áudio - Métodos, propriedades e eventosHTML5 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.
![Page 26: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/26.jpg)
HTML5 Audio TagsTAG<audio> Define o conteúdo de som
<source> Define vários recursos de mídia para os elementos, como <video> e <audio>
![Page 27: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/27.jpg)
![Page 28: Design Gráfico para Web: HTML 5 - Multimídia](https://reader031.vdocuments.net/reader031/viewer/2022030314/5889e2d81a28ab32458b46ad/html5/thumbnails/28.jpg)