INTRODUÇÃO

A tag de vídeo é um dos recursos de HTML5 que mais chamam atenção. Geralmente apresentada como uma alternativa ao Flash na mídia, a tag de vídeo, na verdade, vai muito além disso. Embora ela só tenha se juntado recentemente ao restante das infindáveis tags HTML, seus recursos e compatibilidade com navegadores vêm aumentando a uma velocidade extraordinária. Como você verá neste tutorial, sua principal vantagem é a integração natural com as outras camadas da pilha de desenvolvimento da web, como, por exemplo, CSS e JavaScript, bem como as outras tags HTML.

Este tutorial fornece uma noção básica da tag de vídeo e também mostra vários exemplos de diferentes integrações com outros recursos HTML5, como, por exemplo, 

1. MARCAÇÃO

As linhas a seguir devem ser suficientes para que um vídeo HTML funcione em seu site.

src="movie.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>src="movie.webm"type='video/webm; codecs="vp8, vorbis"'/>

Este snippet usa a tag , que permite incluir vários formatos como tipos de alternativa caso o navegador do usuário não seja compatível com um deles. Veja mais informações sobre isso na próxima seção.

Você também pode usar um único formato de vídeo, o que resultará em uma sintaxe muito semelhante à da tag de imagem. Essa sintaxe será a mais usada em um futuro próximo, quando todos os navegadores suportarem o mesmo formato de vídeo.

Por enquanto, vamos nos concentrar no primeiro caso, que é o mais comum atualmente. O mais importante a ser lembrado é certificar-se de que o servidor esteja veiculando arquivos de vídeo com o tipo MIME correto no cabeçalho Content-Type. Se não estiver, os vídeos podem não funcionar corretamente, mesmo que estejam funcionando em uma cópia local do site. Em um httpd.conf do Apache, basta adicionar estas linhas:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Se o aplicativo estiver sendo veiculado em um aplicativo Google App Engine, será necessário adicionar algo assim a app.yaml (um para cada formato):

- url:/(.*.ogv) static_files: videos_folder/
 mime_type: video/ogg upload: videos_folder/(.*.ogv)

Para melhorar o desempenho do cliente, é importante lembrar-se de especificar o atributo type nas tags de origem ao lidar com vários formatos. Dessa forma, o navegador pode decidir de qual formato pode fazer download e, depois, executar. Em outras palavras, ele só fará download daqueles que puder executar, para aumentar o desempenho do site.