<HTML5> Autor: Fernando Vaz de Lima Pereira

Tamanho: px

Começar a partir da página:

Download "<HTML5> Autor: Fernando Vaz de Lima Pereira"

Bernardo Amado Farinha
7 Há anos
Visualizações:

1 <HTML5> Autor: Fernando Vaz de Lima Pereira 4

2 Multimídia Os elementos de multimídia possuem grande relevância na estrutura de um site ou página de internet. Além de tornar o conteúdo mais dinâmico com a criação das novas tags <video> e <audio> aboliu-se a necessidade de instalação de plugins 1 para se visualizar um determinado arquivo de vídeo ou ouvir um arquivo de áudio. 1.1 <video></video> É um novo elemento de mídia da linguagem HTML5, através dele é possível inserir e reproduzir vídeos em qualquer navegador sem que seja necessária a instalação de plugins. Esta tag possui alguns atributos que foram incorporados para sua melhor utilização. 1.2 Os Atributos src Especifica o local do arquivo de vídeo; height Configura a altura do player de vídeo em pixels; width Configura a largura do player de vídeo em pixels; controls Configura os controles de vídeo. autoplay Permite que o arquivo de vídeo inicie automaticamente quando a página for carregada; muted Configura o vídeo sem áudio; loop Faz com que o vídeo seja reproduzido automaticamente desde o início quando terminado. preload Indica ao navegador como realizar o pré-carregamento do arquivo de vídeo; auto define se o vídeo será carregado automaticamente. metadata define se o vídeo será carregado durante o carregamento da página. none não inicia a exibição do vídeo enquanto a página é carregada. Poster Sobrepõe uma imagem enquanto o vídeo está sendo baixado ou enquanto não é acionado o botão de comando play. 1.3 Exemplos com a tag <video> Para fazer o acompanhamento dos exemplos abaixo é necessário que você faça o 1 Na informática, um plugin ou módulo de extensão (também conhecido por plug-in, add-in, add-on) é um programa de computador usado para adicionar funções a outros programas maiores, provendo alguma funcionalidade especial ou muito específica. Geralmente pequeno e leve, é usado somente sob demanda. 5

download do arquivo dancinha.mp4 através do link: http://1drv.ms/1abgdyp 1.

3 download do arquivo dancinha.mp4 através do link: Exemplo 1 Neste exemplo o player de vídeo aparecerá com os controles habilitados, o vídeo será carregado automaticamente, a largura do player será de 500 pixels e altura de 450 pixels. Resultado: 6

4 1.5 Exemplo 2 No exemplo abaixo manterei os atributos anteriores, porém acrescentarei o atributo muted para que o vídeo seja carregado sem áudio. 1.6 Exemplo 3 Neste exemplo aplicarei o atributo poster, onde será possível visualizar uma imagem sobreposta sobre o player enquanto o vídeo não é exibido, faça o download da imagem dança.jpg através do link 7

5 Resultado: 1.7 <audio></audio> Esta tag permite o uso de áudio na página. Este elemento <audio> suporta os formatos de arquivos.mp3 e.ogg para reprodução. Faça o download do arquivo de áudio daft.mp3 através do link e digite o código do exemplo abaixo: 8

Resultado: No exemplo mostrado acima, o player mostra todos os controles e não executa automaticamente, é necessário que o usuário clique no botão play para iniciar a música. 1.

6 Resultado: No exemplo mostrado acima, o player mostra todos os controles e não executa automaticamente, é necessário que o usuário clique no botão play para iniciar a música. 1.8 Atributos de <audio> Os atributos desta tag são praticamente os mesmos da tag <video>: autoplay Inicia automaticamente a música ao carregar a página; controls Exibe os controles do player de áudio; loop Reinicia o áudio automaticamente em looping quando terminado; preload Indica se o áudio deve ou não ser iniciado quando a página for carregada; src Indica o caminho do arquivo de áudio a ser executado na página. 1.9 <embed> Esta tag incorpora um conteúdo externo ou interativo onde às vezes haja a necessidade de instalação de um plugin para a exibição do conteúdo. Este elemento também pode ser aplicado para exibir vídeos e executar áudio na página de internet utilizando o player padrão do navegador utilizado para acessar a página. Para poder criar a página de exemplo, é necessário fazer o download dos arquivos colorir.swf e passarinhos.mp4 através do link 9

7 Exemplo da tag <embed> com arquivo.swf : Resultado: 10

Outro exemplo é a tag <embed> com arquivos de vídeo: Resultado: Os atributos da tag <embed> são basicamente os mesmo das tags <video> e <audio> com e exceção do

8 Outro exemplo é a tag <embed> com arquivos de vídeo: Resultado: Os atributos da tag <embed> são basicamente os mesmo das tags <video> e <audio> com e exceção do atributo type que especifica o tipo de conteúdo que será exibido na página: <embed src= colorir.swf width= 550px height= 500px type= application/xshockwave-flash > 11

9 1.10 Atividade Crie um site onde a página inicial possua um menu com links para outras três páginas: avengers.html Na páginas trailer Avengers II, você deverá inserir o arquivo de vídeo avengers.mp4, uma tabela com o título do filme, resenha e insira um link para voltar à página inicial. musicas.html Na página minhas músicas você deverá inserir as fotos dos cantores e os arquivos de áudio para execução. animacoes.html Na página animações você deverá inserir um texto com título e descrição do objetivo da animação que também deverá ser incorporada à página. Os arquivos que serão utilizados na atividade, se encontram em com as seguintes descrições: Vídeo avengers.mp4 Música malta.mp3, 1d.mp3 e imagined.mp3 Animação georgeag.swf 12

Documentos relacionados

PUBLICAÇÃO DE MATERIAIS

PUBLICAÇÃO DE MATERIAIS Este recurso permite ao tutor publicar diversos tipos de materiais, bem como: links, vídeos, documentos, textos e imagens. PUBLICAÇÃO DE MATERIAIS EM FORMATO URL Ative a edição