SlideShare uma empresa Scribd logo
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çã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 .
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 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
HTML Video - Tipos de mídia
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>
https://mega.nz/#F!4Q0WWIAb!JO4yiF8XMghTG2K22Zy75w
JavaScript
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
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.
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
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 navegador
Atualmente, 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 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.
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>
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia

Mais conteúdo relacionado

Destaque

Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
Dra. Camila Hamdan
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
Felipe Fernandes
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
Patricia Mallmann
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Daniel Afonso
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
Rildo (@rildosan) Santos
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
Felipe Fernandes
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
Rúben Quadros Ramos
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
Leonardo Pereira
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
Fabio Silveira: Designer | Professor
 
Como produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistenteComo produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistente
Emília Chagas
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
Felipe Fernandes
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
Lijo M Loyid
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
Fabio Silveira: Designer | Professor
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
Intrus
 
Apres pos edit_ied_comite
Apres pos edit_ied_comiteApres pos edit_ied_comite
Apres pos edit_ied_comite
Fabio Silveira: Designer | Professor
 
Lab Integrado de Design IED SP
Lab Integrado de Design IED SPLab Integrado de Design IED SP
Lab Integrado de Design IED SP
Fabio Silveira: Designer | Professor
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
Fabio Silveira: Designer | Professor
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
Léo Dias
 
Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
Moderadora
 

Destaque (20)

Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
 
Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]Business Analysis Canvas [Canvas para Análise de Negócio]
Business Analysis Canvas [Canvas para Análise de Negócio]
 
02 Tipografia_marcas
02 Tipografia_marcas02 Tipografia_marcas
02 Tipografia_marcas
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
 
Princípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não DesignersPrincípios clássicos de composição visual e Gráfica para não Designers
Princípios clássicos de composição visual e Gráfica para não Designers
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Como produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistenteComo produzir conteúdo de qualidade de forma consistente
Como produzir conteúdo de qualidade de forma consistente
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Critical analysis of a website design
Critical analysis of a website designCritical analysis of a website design
Critical analysis of a website design
 
Design Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São PauloDesign Thinking – Coolhunting IED São Paulo
Design Thinking – Coolhunting IED São Paulo
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
Apres pos edit_ied_comite
Apres pos edit_ied_comiteApres pos edit_ied_comite
Apres pos edit_ied_comite
 
Lab Integrado de Design IED SP
Lab Integrado de Design IED SPLab Integrado de Design IED SP
Lab Integrado de Design IED SP
 
Design editorial 2015_matriz
Design editorial 2015_matrizDesign editorial 2015_matriz
Design editorial 2015_matriz
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
 
Criar Páginas Web
Criar Páginas WebCriar Páginas Web
Criar Páginas Web
 

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

Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - Multimídia
Dorival Silva
 
Vídeo digital ass
Vídeo digital  assVídeo digital  ass
Vídeo digital ass
Rafael Peixoto
 
Formatos de áudio
Formatos de áudioFormatos de áudio
Formatos de áudio
guiguiass
 
Tipos de arquivos e seus formatos
Tipos de arquivos e seus formatosTipos de arquivos e seus formatos
Tipos de arquivos e seus formatos
JeffinhoCarlos
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
Jose Berardo
 
Tipos de audios e videos
Tipos de audios e videosTipos de audios e videos
Tipos de audios e videos
Bárbara Parente Mata
 
Arquivos de vídeos
Arquivos de vídeosArquivos de vídeos
Arquivos de vídeos
matheusdasg
 
audacity
audacityaudacity
So aula 14_multimídia
So aula 14_multimídiaSo aula 14_multimídia
So aula 14_multimídia
Roney Sousa
 
Conversao formatos codecs_
Conversao formatos codecs_Conversao formatos codecs_
Conversao formatos codecs_
grupolv
 
Arquivos de video e formatos
Arquivos de video e formatosArquivos de video e formatos
Arquivos de video e formatos
zoraionaria
 
Arquivos de video e formatos
Arquivos de video e formatosArquivos de video e formatos
Arquivos de video e formatos
JeffinhoCarlos
 
Formatos de Áudio e Vídeo
Formatos de Áudio e Vídeo Formatos de Áudio e Vídeo
Formatos de Áudio e Vídeo
macsuell
 
Tipo de vídeo e seus formatos
Tipo de vídeo e seus formatosTipo de vídeo e seus formatos
Tipo de vídeo e seus formatos
barthursilva
 
Identificação de unidades de linguagem
Identificação de unidades de linguagemIdentificação de unidades de linguagem
Identificação de unidades de linguagem
lucas999999999
 
Tipos de áudios e seus formatos
Tipos de áudios e seus formatosTipos de áudios e seus formatos
Tipos de áudios e seus formatos
guiguiass
 
Aula sobre Codecs de Vídeo
Aula sobre Codecs de VídeoAula sobre Codecs de Vídeo
Aula sobre Codecs de Vídeo
Robson Mioto
 
Codec de áudio e vídeo, transcoders e containers multimídia
Codec de áudio e vídeo, transcoders e containers multimídiaCodec de áudio e vídeo, transcoders e containers multimídia
Codec de áudio e vídeo, transcoders e containers multimídia
Leandro Curioso
 
Tipos de Áudios e Vìdeos
Tipos de Áudios e VìdeosTipos de Áudios e Vìdeos
Tipos de Áudios e Vìdeos
Pikinhasequinha
 
Tipos de áudio
Tipos de áudioTipos de áudio
Tipos de áudio
JeffinhoCarlos
 

Semelhante a Design Gráfico para Web: HTML 5 - Multimídia (20)

Aula3 HTML 5 - Multimídia
Aula3 HTML 5 - MultimídiaAula3 HTML 5 - Multimídia
Aula3 HTML 5 - Multimídia
 
Vídeo digital ass
Vídeo digital  assVídeo digital  ass
Vídeo digital ass
 
Formatos de áudio
Formatos de áudioFormatos de áudio
Formatos de áudio
 
Tipos de arquivos e seus formatos
Tipos de arquivos e seus formatosTipos de arquivos e seus formatos
Tipos de arquivos e seus formatos
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
Tipos de audios e videos
Tipos de audios e videosTipos de audios e videos
Tipos de audios e videos
 
Arquivos de vídeos
Arquivos de vídeosArquivos de vídeos
Arquivos de vídeos
 
audacity
audacityaudacity
audacity
 
So aula 14_multimídia
So aula 14_multimídiaSo aula 14_multimídia
So aula 14_multimídia
 
Conversao formatos codecs_
Conversao formatos codecs_Conversao formatos codecs_
Conversao formatos codecs_
 
Arquivos de video e formatos
Arquivos de video e formatosArquivos de video e formatos
Arquivos de video e formatos
 
Arquivos de video e formatos
Arquivos de video e formatosArquivos de video e formatos
Arquivos de video e formatos
 
Formatos de Áudio e Vídeo
Formatos de Áudio e Vídeo Formatos de Áudio e Vídeo
Formatos de Áudio e Vídeo
 
Tipo de vídeo e seus formatos
Tipo de vídeo e seus formatosTipo de vídeo e seus formatos
Tipo de vídeo e seus formatos
 
Identificação de unidades de linguagem
Identificação de unidades de linguagemIdentificação de unidades de linguagem
Identificação de unidades de linguagem
 
Tipos de áudios e seus formatos
Tipos de áudios e seus formatosTipos de áudios e seus formatos
Tipos de áudios e seus formatos
 
Aula sobre Codecs de Vídeo
Aula sobre Codecs de VídeoAula sobre Codecs de Vídeo
Aula sobre Codecs de Vídeo
 
Codec de áudio e vídeo, transcoders e containers multimídia
Codec de áudio e vídeo, transcoders e containers multimídiaCodec de áudio e vídeo, transcoders e containers multimídia
Codec de áudio e vídeo, transcoders e containers multimídia
 
Tipos de Áudios e Vìdeos
Tipos de Áudios e VìdeosTipos de Áudios e Vìdeos
Tipos de Áudios e Vìdeos
 
Tipos de áudio
Tipos de áudioTipos de áudio
Tipos de áudio
 

Mais de Dra. Camila Hamdan

Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e TecnologiaIntrodução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Dra. Camila Hamdan
 
AULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animaçãoAULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animação
Dra. Camila Hamdan
 
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICAAULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
Dra. Camila Hamdan
 
Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015
Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.
Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: ErroErgonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: Erro
Dra. Camila Hamdan
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:
Dra. Camila Hamdan
 
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Dra. Camila Hamdan
 
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Dra. Camila Hamdan
 
Projeto: Mergulhador (Modelagem Digital)
 Projeto: Mergulhador (Modelagem Digital) Projeto: Mergulhador (Modelagem Digital)
Projeto: Mergulhador (Modelagem Digital)
Dra. Camila Hamdan
 
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 CronogramaDiscriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Dra. Camila Hamdan
 
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Dra. Camila Hamdan
 
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Dra. Camila Hamdan
 
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Dra. Camila Hamdan
 
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Dra. Camila Hamdan
 
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Dra. Camila Hamdan
 
Animação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squashAnimação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squash
Dra. Camila Hamdan
 

Mais de Dra. Camila Hamdan (20)

Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e TecnologiaIntrodução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
 
AULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animaçãoAULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animação
 
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICAAULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
 
Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.
 
Ergonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: ErroErgonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: Erro
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:
 
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
 
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
 
Projeto: Mergulhador (Modelagem Digital)
 Projeto: Mergulhador (Modelagem Digital) Projeto: Mergulhador (Modelagem Digital)
Projeto: Mergulhador (Modelagem Digital)
 
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 CronogramaDiscriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
 
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
 
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
 
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
 
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
 
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
 
Animação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squashAnimação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squash
 

Último

A festa junina é uma tradicional festividade popular que acontece durante o m...
A festa junina é uma tradicional festividade popular que acontece durante o m...A festa junina é uma tradicional festividade popular que acontece durante o m...
A festa junina é uma tradicional festividade popular que acontece durante o m...
ANDRÉA FERREIRA
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
ProfessoraTatianaT
 
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
JoanaFigueira11
 
epidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).pptepidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).ppt
MarceloMonteiro213738
 
GÊNERO TEXTUAL - POEMA.pptx
GÊNERO      TEXTUAL     -     POEMA.pptxGÊNERO      TEXTUAL     -     POEMA.pptx
GÊNERO TEXTUAL - POEMA.pptx
Marlene Cunhada
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
beatrizsilva525654
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
Manuais Formação
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
Simone399395
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
joaresmonte3
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
LeticiaRochaCupaiol
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
TomasSousa7
 
-Rudolf-Laban-e-a-teoria-do-movimento.ppt
-Rudolf-Laban-e-a-teoria-do-movimento.ppt-Rudolf-Laban-e-a-teoria-do-movimento.ppt
-Rudolf-Laban-e-a-teoria-do-movimento.ppt
fagnerlopes11
 
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdfUFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
Manuais Formação
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
eaiprofpolly
 
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptxSlides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
As sequências didáticas: práticas educativas
As sequências didáticas: práticas educativasAs sequências didáticas: práticas educativas
As sequências didáticas: práticas educativas
rloureiro1
 
Cartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptxCartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptx
Zenir Carmen Bez Trombeta
 
Rimas, Luís Vaz de Camões. pptx
Rimas, Luís Vaz de Camões.          pptxRimas, Luís Vaz de Camões.          pptx
Rimas, Luís Vaz de Camões. pptx
TomasSousa7
 
Aula 2 - Revisando o significado de fração - Parte 2.pptx
Aula 2 - Revisando o significado de fração - Parte 2.pptxAula 2 - Revisando o significado de fração - Parte 2.pptx
Aula 2 - Revisando o significado de fração - Parte 2.pptx
LILIANPRESTESSCUDELE
 
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
fran0410
 

Último (20)

A festa junina é uma tradicional festividade popular que acontece durante o m...
A festa junina é uma tradicional festividade popular que acontece durante o m...A festa junina é uma tradicional festividade popular que acontece durante o m...
A festa junina é uma tradicional festividade popular que acontece durante o m...
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
 
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
 
epidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).pptepidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).ppt
 
GÊNERO TEXTUAL - POEMA.pptx
GÊNERO      TEXTUAL     -     POEMA.pptxGÊNERO      TEXTUAL     -     POEMA.pptx
GÊNERO TEXTUAL - POEMA.pptx
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
 
-Rudolf-Laban-e-a-teoria-do-movimento.ppt
-Rudolf-Laban-e-a-teoria-do-movimento.ppt-Rudolf-Laban-e-a-teoria-do-movimento.ppt
-Rudolf-Laban-e-a-teoria-do-movimento.ppt
 
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdfUFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
 
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptxSlides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
 
As sequências didáticas: práticas educativas
As sequências didáticas: práticas educativasAs sequências didáticas: práticas educativas
As sequências didáticas: práticas educativas
 
Cartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptxCartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptx
 
Rimas, Luís Vaz de Camões. pptx
Rimas, Luís Vaz de Camões.          pptxRimas, Luís Vaz de Camões.          pptx
Rimas, Luís Vaz de Camões. pptx
 
Aula 2 - Revisando o significado de fração - Parte 2.pptx
Aula 2 - Revisando o significado de fração - Parte 2.pptxAula 2 - Revisando o significado de fração - Parte 2.pptx
Aula 2 - Revisando o significado de fração - Parte 2.pptx
 
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
 

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

  • 1.
  • 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>:
  • 9.
  • 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>
  • 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>