Querer ser bem sucedido sem trabalhar duro é como querer colher sem plantar. - David Bly

HTML 5 - Vídeo

03 de Setembro de 2012

Muitos sites modernos mostram vídeos em vários formatos diferentes. O HTML5 fornece um elemento padrão para vários formatos e os modelos de exibição podem ser configurados com CSS.

Vídeos

Vídeos na Web

Até agora, não houve um padrão para mostrar um vídeo / filme em uma página web. Hoje, a maioria dos vídeos são mostrados através de um plug-in (como flash). E ainda, navegadores diferentes podem ter diferentes plug-ins.

O HTML5 define um novo elemento que especifica uma forma padrão de inserir um vídeo / filme em uma página web: o elemento <video>.

Suporte de Navegadores

Esta tag é suportada pelos navegadores Internet Explorer 9, Firefox 4, Opera, Chrome e Safari.

Importante: as versões do Internet Explorer 8 e versões anteriores, não suportam o elemento. Sendo assim, é necessário informar na tela que o usuário precisa atualizar o browser para visualizar o vídeo.

Como funciona?

Um pequeno exemplo para mostrar um vídeo em HTML5:

<video width="320" height="240" controls="controls">
<source type="video/mp4" src="movie.mp4"></source>
<source type="video/ogg" src="movie.ogg"></source>
Your browser does not support the video tag.
</video>

O atributo controls adiciona controles de vídeo como play, pause e volume.

Também é uma boa idéia sempre incluir a atributos de largura e altura (width e height). Se a altura e largura são definidos, o espaço necessário para o vídeo é reservado quando a página é carregada. No entanto, sem esses atributos, o navegador não sabe o tamanho do vídeo, e não pode reservar o espaço apropriado para isso. O efeito será que o layout da página vai mudar durante o carregamento (enquanto o vídeo é carregado).

Você também pode inserir o conteúdo de texto entre o <video> e </vídeo> para navegadores que não suportam o elemento <video>.

O elemento <video> permite que vários elementos <source> que podem vincular vários arquivos de vídeo diferentes. O browser usará o formato reconhecido primeiro.

Formatos de vídeo suportador por navegador

Atualmente, existem três formatos de vídeo com suporte para o elemento <video>: MP4, WebM, e Ogg:

Navegador MP4 WebM Ogg
Internet Explorer 9 SIM NÃO NÃO
Firefox 4.0 NÃO SIM SIM
Google Chrome 6 SIM SIM SIM
Apple Safari 5 SIM NÃO NÃO
Opera 10,6 NÃO SIM SIM
  • MP4 = MPEG 4 arquivos com codec de vídeo H264 e áudio AAC codec
  • WebM = arquivos WebM com codec de vídeo VP8 e codec de áudio Vorbis
  • Ogg = Ogg Theora arquivos com codec de vídeo e áudio codec Vorbis

Elementos da tag Video HTML5

Elemento Descrição
<video> Define um vídeo ou filme
<source> Define vários recursos de mídia para elementos de mídia, tais como <video> e <audio>
<track> Define faixas de texto em mediaplayers

Logo mais veremos sobre os controles da tag <video>.
Até o próximo post!



Este post ainda não possui comentários. Seja o primeiro!

Deixe seu comentário

Seu e-mail não será exibido.
Receba as Novidades

Para receber as últimas novidades e promoções do site, digite seu e-mail e clique em enviar.

Arquivo do Blog