View
670
Download
4
Category
Preview:
Citation preview
DESIGN GRÁFICO PARA WEBHTML 5: Multimídia
Profa. Camila Hamdan – http://www.camilahamdan.net
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.
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.
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.
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.
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 .
O HTML elemento <video>
Para mostrar um vídeo em HTML, use o <video>:
https://mega.nz/#F!ldFymbYZ!HZkPPReIwGbnuKauCkWkvg
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.
SUPORTE NAVEGADOR
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento <video>.
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.
HTML <video> Autoplay
Para iniciar um vídeo e usar automaticamente o atributo autoplay:
https://mega.nz/#F!ERE11RKD!68M3Ks9BMKaKqQjL3rcjXw
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
HTML Video - Tipos de mídia
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>
https://mega.nz/#F!4Q0WWIAb!JO4yiF8XMghTG2K22Zy75w
JavaScript
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
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.
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
O HTML <audio>
Para reproduzir um arquivo de áudio em HTML, use o <audio> elemento:
https://mega.nz/#F!0FlkDL5T!Une73qkoInLbYU952walCw
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.
HTML de áudio - Compatibilidade de navegadorAtualmente, existem 3 formatos de arquivos suportados para o <audio> elemento: MP3, WAV e OGG:
HTML de áudio - Tipos de mídia
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.
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>
Recommended