O que é vídeo HTML5?
A especificação HTML5 introduziu o elemento de vídeo com a finalidade de reproduzir vídeos, substituindo parcialmente o elemento de objeto.
vídeo HTML5 é pretendido por seus criadores para se tornar a nova forma padrão para mostrar o vídeo na web, em vez do padrão facto de anterior de usar o proprietário do plugin Adobe Flash, embora a adoção antecipada foi prejudicado pela falta de acordo a respeito de que os formatos de codificação de vídeo e formatos de codificação de áudio deve ser apoiada em navegadores web.
Reprodução de vídeos em HTML
Antes HTML5, não havia nenhum padrão para exibição de vídeos em uma página web.
Antes HTML5, vídeos só poderia ser jogado com um plug-in (like flash) .
O HTML5 <video> elemento especifica uma forma padrão de inserir um vídeo em uma página web.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta plenamente o <video> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9 | 3,5 | 4.0 | 10,5 |
O HTML <video> Elemento
Para mostrar um vídeo em HTML, use o <video> elemento:
Exemplo
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Tente você mesmo " Como funciona
O controls atribuir adiciona controles de vídeo, como play, pause e volume.
É uma boa idéia de incluir sempre width e height atributos.
Se a altura e largura não estão definidos, o navegador não sabe o tamanho do vídeo. O efeito será que a página vai mudar (or flicker) , enquanto as cargas de vídeo.
Texto entre o <video> e </video> tag só vai exibir em navegadores que não suportam o <video> elemento.
Vários <source> elementos podem conectar-se a arquivos de vídeo diferentes. O navegador irá usar o primeiro formato reconhecido.
HTML <video> Autoplay
Para iniciar um vídeo usar automaticamente o autoplay atributo:
Exemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Tente você mesmo " O autoplay atributo não funciona em dispositivos móveis como iPad e iPhone.
HTML Vídeo - Suporte a navegadores
Atualmente, existem 3 formatos de vídeo suportados para o <video> elemento: MP4, WebM e Ogg:
| navegador | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
Vídeo HTML - Tipos de Mídia
| Formato de arquivo | Tipo de mídia |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Vídeo HTML - métodos, propriedades e eventos
HTML5 define métodos DOM, propriedades e eventos para o <video> elemento.
Isso permite que você carregue, tocar e pausar vídeos, bem como a definição de duração e volume.
Há também eventos DOM que pode notificá-lo quando um vídeo começa a tocar, está em pausa, etc.
Para uma referência DOM completa, vá ao nosso HTML5 Audio / Video DOM Referência .
HTML5 Etiquetas de video
| etiqueta | Descrição |
|---|---|
| <video> | Define um vídeo ou filme |
| <source> | Define vários recursos de mídia para os elementos de mídia, como <video> e <audio> |
| <track> | Define faixas de texto em players de mídia |