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>