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.
HTML Básico
- Capa
- Índice
- Introdução
- Começo
- Básico
- Elementos
- Atributos
- Títulos
- Parágrafos
- Formatação
- Fontes
- Estilos
- Links
- Imagens
- Tabelas
- Listas
- Formulários
- Frames
- Iframes
- Cores
HTML Avançado
HTML Media
XHTML
HTML5
HTML Referências