HTML 5 – Parte 4 – Vídeo e Áudio

Olá pessoal, tudo certin?

Já falei um bocado sobre HTML5. Até aqui, gastei bastante tempo falando sobre recursos secundários (fora das luzes e refletores) da especificação. Se tiver interesse, pode encontrar esse conteúdo em:

• HTML5 – Parte 3 – Formulários
• HTML5 – Parte 2 – Semântica para todos
• HTML5 – Parte 1 – história e elementos de estrutura

Há algum tempo, o conceito de multimídia na WEB estava limitado aos terríveis MIDI tocando em loop e alguma animação através de GIF animados. Na medida em que a largura de banda e tecnologias de compressão foram melhorando, percebemos o MP3 tomando o lugar dos MIDI e vídeos “de verdade” começaram a ser utilizados. Quem não teve experiências com Real Player, Windows Media, …

Em 2005, o Flash se firmou como “o plugin multimídia”, muito por causa de sua adoção no Youtube. Agora, Silverlight aparece também como alternativa.

HTML5 oferece uma solução competitiva, baseada em padrões abertos ,para multimídia na WEB com seu suporte nativo para vídeo e áudio. Hoje, falarei sobre isso!

Sem mais delongas,

O problema dos plugins

Até hoje, se desenvolvedores quiserem incluir vídeos em suas páginas WEB, precisam fazer uso do elemento <object>, que é o container genérico para “objetos estranhos”.  Além disso, devido a inconsistências nos browsers, muitos parâmetros precisam ser duplicados. O resultado: código  feio e ruim de manter. Ainda pior que isso é o fato de depender de plugins de terceiros, contando que o usuário tenha a versão correta desse plugin (ou tenha permissão para baixar e instalar esse plugin, além de conhecimento sobre como fazer isso).

Plugins podem também causar instabilidade, além de assustar usuários menos técnicos quando esses são interrogados quanto a instalar novas versões.

Sempre que incluímos plugins em nossas páginas, estamos assumindo que o browser irá “delegar” uma parte da interface para atender esse plugin. A área que esse plugin ocupa é uma “caixa preta” sendo que o browser não tem qualquer controle sobre o que está acontecendo ali. De forma geral, isso não é um problema, mas, algumas considerações de design precisam ser feitas. Por exemplo: menus drop-down providos via CSS não serão exibidos sobre a área do plugin. Por padrão, o plugin aparece sobre a página, o que significa que qualquer menu acabe ficando “por trás” desse plugin.

HTML5 provê uma maneira padrão para executar vídeo diretamente no browser, sem necessidade de plugins.

O elemento <video>

HTML5 define um elemento novo para representar vídeos : <video>.

Uma das maiores vantagens do elemento <video> do HTML5 é que, finalmente, videos passam a ser  “integrantes” comum da web. Não é mais necessário fazer “curvas” para adicionar um elemento altamente compatível. Além disso, o elemento vídeo pode ser “estilizado” com CSS; podendo ser redimensionado, por exemplo.

Importante observar que, diferente do que está sendo anunciado, acho pouco provável que HTML5 venha “matar” todos os plugins para vídeo. Há alguns cenários atendidos por plugins que não são atendidos pela especificação do HTML5. Proteção de conteúdo, por exemplo, não é algo oferecido nativamente (não há uma especificação formal para isso, pelo menos). Então, se você precisa algum tipo de DRM, não deve utilizar HTML5. Com ele, será tão fácil fazer download de áudio ou vídeo, quanto é salvar uma imagem.

Para adicionar um vídeo a sua página, basta:

1 <video src=demo.mp4 autoplay controls>
2    Download <a href=demo.mp4>a demo video!</a>
3 </video>

O que foi feito?

1. especifiquei o arquivo de vídeo que desejo executar (atributo src). Entre os formatos aceitos globalmente estão o MPEG4, Flash Vídeo e AVI Ainda há discussão sobre formatos e containers que serão suportados.
2. o atributo autoplay indica que o vídeo deve ser executado imediatamente;
3. o atributo controls habilita interface do browser para que o usário consig controlar o andamento do vídeo (play, pause, resume)
4. o indicativo para download, que é mostrado como alternativa em browsers antigos que não tenham suporte para o elemento <video>;

O controle no Chrome ficou assim:

No Safari:

No Internet Explorer 9:

O elemento <audio>

HTML5 define um elemento para representar áudio: <audio>.

Tudo o que foi dito até aui para vídeos vale igualmente para áudio. Segue meu código para carregar um MP3 no browser:

1 <!doctype html>
2 <meta charset=utf-8>
3 <audio src=LouReed_PerfectDay.mp3 autoplay controls>
4    Download <a href=LouReed_PerfectDay.mp3>video!</a>
5 </audio>

Importante: se o atributo controls não for adicionado, não haverá qualquer renderização na página. Claro que examinando o DOM da página, teremos o elemento lá.

Principais atributos para os elementos <audio> e <video>

Os elementos audio e vídeo podem ter sua interface refinada conforme parâmetros informados. Segue um breve resumo dos atributos mais importantes (tomarei a liberdade de não explicar obviedades):

• autoplay;
• controls (já explicado);
• poster – podemos informar o endereço de uma imagem que deverá ser apresentada enquanto estiver ocorrendo o download de um vídeo ou antes do início de sua execução (apenas para <video>). Se o atributo não for especificado, o primeiro frame do vídeo será assumido como imagem padrão;
• width e height – Dizem para o browser o “tamanho”, em píxels, do vídeo (não aplicável para áudio). Se esse valor não for especificado, o browser tenta recuperar essa informação do recurso. Caso não esteja disponível, assume largura de 300. Se apenas um dos valores for especificado, a definição do outro ocorrerá pelo ratio.
• loop – atributo boolean (óbvio)
• preload – inicia o download do recurso assim que a página for carregada. É indicado para situações onde temos certeza de que os usuários daram um “play”, mas não queremos ser intrusivos ao ponto de iniciar o vídeo automaticamente; Os usos válidos para esse atributo são:
  • preload=auto (ou apenas préload)
  • preload=none (desligar o pré-carga!)
  • preload=metadata (dimensões, primeiro frame, duração);

Interface para programação

Aqui temos um recurso fantástico! Os dois elementos apresentam amplo suporte a programação: funções para execução dos controles, suporte a enventos, entre outras coisas. Com isso, podemos:

• construir uma outra interface para os controles e melhorar a interação com o usuário (como visto, cada browser dá uma “carinha” para os controles do vídeo)
• construir uma lógica de execução personalizada (pensando em jogos e afins).

Está fora dos meus objetivos mostrar nesse post a interface de programação para esses elementos. Se há demanda, faça-me saber.

Definindo HTML5

Como prometido, durante essa série, na medida em que vamos conhecendo mais detalhes do HTML5, vou tentar ir criando uma definição para a linguagem. Com o que temos aqui, podemos dizer que:

HTML5 é a sucessora oficial para o HTML 4.01, que está sendo desenvolvida paralelamente pelo W3C e pelo WHATWG, que dá ênfase maior para a semântica do que para a sintaxe. Incorporou mais significado aos documentos mediante novas TAGs de indicação ao conteúdo. Além disso, simplificou drasticamente a criação de formulários e players de áudio/vídeo reduzindo muito a necessidade da escrita de código JavaScript ou plugins.

Por enquanto, é o que temos. Vamos avançar mais nos estudos para poder complementar essa definição!

Bem,

Por hoje, era isso.