Video

< Object | Índice | YouTube >

No HTML os vídeos podem ser tocados de diversas maneiras.


Tocando vídeos em HTML

Exemplo:

<video width="320" height="240" controls="controls">
  <source src="trailer.mp4" type="video/mp4" />
  <source src="trailer.ogg" type="video/ogg" />
  <source src="trailer.webm" type="video/webm" />
<object data="trailer.mp4" width="320" height="240">
  <embed src="trailer.swf" width="320" height="240" />
</object>
</video>

Problemas e soluções

Mostrar vídeos no HTML não é lá muito fácil.

Você tem que usar diversos truques para garantir que o arquivo será mostrado em diferentes browsers como: Internet Explorer, Chrome, Firefox, Safari, Opera; E também em todas as plataformas (PC, Mac , iPad, iPhone).

Neste capítulo resumimos os principais problemas e soluções.


A tag <embed>

O propósito da tag <embed> é de embutir elementos multimedia em páginas HTML.

O exemplo abaixo demonstra um vídeo flash embutido em uma página da web:

Exemplo:

<embed src="bote.swf" height="200" width="200"/>

Problems:

  • A tag <embed> não existe no HTML 4. Sua página não será validada corretamente.
  • Se o browser não oferece suporte para Flash, seu vídeo não irá tocar.
  • iPad e iPhone não mostram vídeos Flash.
  • Se você converter o vídeo para outro formato, ele não irá tocar em todos os browsers.

Usando a tag <object>

O propósito da tag <object> é embutir elementos multimedia nas páginas html.

O exemplo abaixo demonstra um vídeo flash embutido em uma página html:

Exemplo:

<object data="intro.swf" height="200" width="200"/>

Problemas:

  • Se o browser não apresenta suporte para flash, seu vídeo não irá tocar.
  • iPad e iPhone não mostram vídeos em Flash.
  • Mesmo convertendo o vídeo para outro formato, ele não irá tocar em todos os browsers.

Usando a tag <video>

O elemento <video> é novo no HTML 5.

O propósito da tag <video> é embutir elementos de vídeo no HTML.

O fragmento HTML seguinte mostra um vídeo em ogg, mp4, ou formato webm embutidos em uma página:

Exemplo:

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

Problems:

  • Você terá que converter seus vídeos para diferentes formatos.
  • O elemento <video> não funciona em browsers antigos.
  • O elemento <video> não valida em HTML 4 e XHTML.

A melhor solução

Usando HTML 5 + <object> + <embed>:

<video width="320" height="240" controls="controls">
  <source src="trailer.mp4" type="video/mp4" />
  <source src="trailer.ogg" type="video/ogg" />
  <source src="trailer.webm" type="video/webm" />
<object data="trailer.mp4" width="320" height="240">
<embed src="trailer.swf" width="320" height="240">
Seu browser não possui suporte para vídeos
</embed>
</object>
</video>

O exemplo acima usa 4 formatos diferentes de video. O elemento <video> do HTML 5 tenta tocar o arquivo em um dos primeiros 3 formatos. Caso falhe, irá tentar o elemento <object>. Se isso també falhar, irá tentar tocar o elemento <embed>.

Problemas:

  • Você deve converter o formato para muitos formatos diferentes.
  • O elemento <video> Não valida em HTML 4 e XHTML.
  • O elemento <embed> não valida em HTML 4 e XHTML.

NOTE: Usando <!DOCTYPE html> resolve os problemas de validação.


Usando o YouTube

A maneira mais simples de mostrar vídeos em suas páginas é usando o YouTube (Veja o próximo capítulo).


Usando um Hyperlink

Se uma página possui um hyperlink para um arquivo de media, a maioria dos browsers irá usar um plug-in para tocar o arquivo.

O exemplo abaixo mostra um link para um vídeo em Flash. Se o usuário clicar no link, o browser irá automaticamente rodar o plug-in:

Exemplo:

<a href="intro.swf">Tocar o arquivo de vídeo</a>

Dica sobre videos no HTML

Se você for incluir vídeos em suas páginas web, lembre-se que muitas pessoas acham isso desagradável. Lembre-se também que alguns usuários podem desligar a opção de mostrar vídeos dentro do browsser.

Se você for incluir vídeos em suas páginas, inclua somente nos lugares onde o usuário espera ver vídeos ou música. Um exemplo seria o usuário clicar sobre uma imagem de um álbum dos beatles e lá nesta nova página encontrar um vídeo sendo exibido sobre os bastidores da gravação do álbum.

< Object | Índice | YouTube >