Vídeo HTML

Existem muitos métodos para reproduzir vídeos em 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ídeos em 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 problemas e soluções para você.

Use a etiqueta <embed>.

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

O seguinte código HTML mostra um vídeo Flash incorporado 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 etiqueta <embed>. A 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 etiqueta <object>.

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

O seguinte fragmento HTML mostra um vídeo Flash incorporado 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 etiqueta <video>.

O <video> é uma nova etiqueta no HTML 5.

A função da tag <video> é嵌入 HTML página de vídeo elementos.

O seguinte fragmento HTML exibirá um vídeo embutido na página na forma de ogg, mp4 ou webm:

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 a 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 no 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 acima, 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, recuará para o elemento <embed>.

Problema

  • Você deve converter o vídeo em muitos formatos diferentes
  • O elemento <video> não pode ser validado no HTML 4 e XHTML.
  • O elemento <embed> não pode ser validado no 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 hiperlinks

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

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 em linha

Quando um vídeo é incluído na página da web, ele é chamado de vídeo em linha.

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

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

A melhor recomendação é incluir vídeos em linha apenas onde o usuário deseja vê-los. 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> Desaprovado.Define o applet embutido.
<embed> Desaprovado.Define o objeto embutido (permitido no HTML5).
<object> Define o objeto embutido.
<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> As tags definem o conteúdo embutido, como plug-ins.