HTML 5 - Vídeo
Muitos sites modernos mostram vídeos em vários formatos diferentes. O HTML5 fornece um elemento padrão para vários formatos e os modelos de exibição podem ser configurados com CSS.
Vídeos na Web
Até agora, não houve um padrão para mostrar um vídeo / filme em uma página web. Hoje, a maioria dos vídeos são mostrados através de um plug-in (como flash). E ainda, navegadores diferentes podem ter diferentes plug-ins.O HTML5 define um novo elemento que especifica uma forma padrão de inserir um vídeo / filme em uma página web: o elemento <video>.
Suporte de Navegadores
Esta tag é suportada pelos navegadores Internet Explorer 9, Firefox 4, Opera, Chrome e Safari.
Importante: as versões do Internet Explorer 8 e versões anteriores, não suportam o elemento. Sendo assim, é necessário informar na tela que o usuário precisa atualizar o browser para visualizar o vídeo.
Como funciona?
Um pequeno exemplo para mostrar um vídeo em HTML5:
<video width="320" height="240" controls="controls"> <source type="video/mp4" src="movie.mp4"></source> <source type="video/ogg" src="movie.ogg"></source> Your browser does not support the video tag. </video>
O atributo controls adiciona controles de vídeo como play, pause e volume.
Também é uma boa idéia sempre incluir a atributos de largura e altura (width e height). Se a altura e largura são definidos, o espaço necessário para o vídeo é reservado quando a página é carregada. No entanto, sem esses atributos, o navegador não sabe o tamanho do vídeo, e não pode reservar o espaço apropriado para isso. O efeito será que o layout da página vai mudar durante o carregamento (enquanto o vídeo é carregado).
Você também pode inserir o conteúdo de texto entre o <video> e </vídeo> para navegadores que não suportam o elemento <video>.
O elemento <video> permite que vários elementos <source> que podem vincular vários arquivos de vídeo diferentes. O browser usará o formato reconhecido primeiro.
Formatos de vídeo suportador por navegador
Atualmente, existem três formatos de vídeo com suporte para o elemento <video>: MP4, WebM, e Ogg:
| Navegador | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer 9 | SIM | N?O | N?O |
| Firefox 4.0 | N?O | SIM | SIM |
| Google Chrome 6 | SIM | SIM | SIM |
| Apple Safari 5 | SIM | N?O | N?O |
| Opera 10,6 | N?O | SIM | SIM |
- MP4 = MPEG 4 arquivos com codec de vídeo H264 e áudio AAC codec
- WebM = arquivos WebM com codec de vídeo VP8 e codec de áudio Vorbis
- Ogg = Ogg Theora arquivos com codec de vídeo e áudio codec Vorbis
Elementos da tag Video HTML5
| Elemento | Descrição |
|---|---|
| <video> | Define um vídeo ou filme |
| <source> | Define vários recursos de mídia para elementos de mídia, tais como <video> e <audio> |
| <track> | Define faixas de texto em mediaplayers |