Vídeo HTML

Existem muitos métodos para reproduzir vídeos no HTML.

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" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Experimente você mesmo

Problemas, problemas e soluções

Reproduzir vídeo no HTML não é fácil!

Você precisa dominar muitas técnicas para garantir que seus arquivos de vídeo possam ser reproduzidos em todos os navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) e em todos os dispositivos (PC, Mac, iPad, iPhone).

Neste capítulo, CodeW3C.com resume os problemas e soluções para você.

Use a tag <embed>.

A função da tag <embed> é embedding elementos multimídia em uma página HTML.

O seguinte código HTML mostra um vídeo Flash嵌入 na página da web:

Exemplo

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

Experimente você mesmo

Problema

  • O HTML4 não pode reconhecer a tag <embed>. Sua página não pode ser validada.
  • Se o navegador não suportar Flash, o vídeo não pode ser reproduzido.
  • iPad e iPhone não podem exibir vídeos Flash.
  • Se você converter o vídeo para outro formato, ele ainda não pode ser reproduzido em todos os navegadores.

Use a tag <object>.

A função da tag <object> é embedding elementos multimídia em uma página HTML.

O seguinte fragmento HTML mostra um vídeo Flash嵌入 na página da web:

Exemplo

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

Experimente você mesmo

Problema

  • Se o navegador não suportar Flash, o vídeo não pode ser reproduzido.
  • iPad e iPhone não podem exibir vídeos Flash.
  • Se você converter o vídeo para outro formato, ele ainda não pode ser reproduzido em todos os navegadores.

Use a tag <video>.

<video> é a nova tag do HTML 5.

O papel do tag <video> é integrar elementos de vídeo em páginas HTML.

O seguinte fragmento HTML exibirá um vídeo em formato ogg, mp4 ou webm integrado à 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" />
Seu navegador não suporta o tag de vídeo.
</video>

Experimente você mesmo

Problema

  • Você deve converter o vídeo em muitos formatos diferentes.
  • O elemento <video> não funciona em navegadores antigos.
  • O elemento <video> não pode ser validado em HTML 4 e XHTML.

A melhor solução HTML

HTML 5 + <object> + <embed>

<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" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Experimente você mesmo

No exemplo anterior, foram usados 4 formatos de vídeo diferentes. O elemento <video> do HTML 5 tentará reproduzir o vídeo em um dos formatos mp4, ogg ou webm. Se todos falharem, ele recuará para o elemento <embed>.

Problema

  • Você deve converter o vídeo em muitos formatos diferentes
  • O elemento <video> não pode ser validado em HTML 4 e XHTML.
  • O elemento <embed> não pode ser validado em HTML 4 e XHTML.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validação.

Solução Youku

A maneira mais simples de exibir um vídeo em HTML é usar sites de vídeos como Youku.

Se você desejar reproduzir um vídeo em uma página da web, você pode carregar o vídeo em sites de vídeos como Youku e, em seguida, inserir o código HTML na sua página para reproduzir o vídeo:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Experimente você mesmo

Uso de Hyperlinks

Se a página da web contiver links para arquivos de mídia, a maioria dos navegadores usará um aplicativo auxiliar para reproduzir os arquivos.

O seguinte trecho de código mostra um link para um arquivo AVI. Se o usuário clicar no link, o navegador iniciará um aplicativo auxiliar, como o Windows Media Player, para reproduzir o arquivo AVI:

Exemplo

<a href="movie.swf">Reproduzir um arquivo de vídeo</a>

Experimente você mesmo

Um comentário sobre vídeos embutidos

Quando o vídeo é incluído na página da web, ele é chamado de vídeo embutido.

Se você planeja usar vídeos embutidos em aplicações web, você precisa estar ciente de que muitos acham que os vídeos embutidos são irritantes.

Além disso, note que o usuário pode ter desativado a opção de vídeo embutido no navegador.

A melhor recomendação é incluir apenas onde o usuário deseja ver o vídeo embutido. Um exemplo positivo é, quando o usuário precisa ver um vídeo e clicar em um link, a página abre e o vídeo é reproduzido.

Tags Multimídia do HTML 4.01

Tag Descrição
<applet> Desaconselhável.Define o applet incorporado.
<embed> Desaconselhável.Define o objeto incorporado (permitido no HTML5).
<object> Define o objeto incorporado.
<param> Define os parâmetros do objeto.

Tags Multimídia do HTML 5

Tag Descrição
<video> A tag define sons, como música ou outros fluxos de áudio.
<embed> A tag define o conteúdo incorporado, como plug-ins.