Codex

< Object | Índice | YouTube >

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


Tocando vídeos em HTML

Exemplo:


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:

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:

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:

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>:

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:


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 >