Vídeo HTML
O elemento HTML <video>é usado para mostrar um vídeo em uma página da web.
O elemento HTML <video>
Para mostrar um vídeo em HTML, use o <video>elemento:
Exemplo
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Como funciona
O controlsatributo adiciona controles de vídeo, como reproduzir, pausar e volume.
É uma boa ideia incluir sempre widthe heightatributos. Se a altura e a largura não estiverem definidas, a página poderá piscar enquanto o vídeo é carregado.
O <source>elemento permite especificar arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.
O texto entre as tags <video>e </video>só será exibido em navegadores que não suportam o <video>elemento.
HTML <vídeo> Reprodução automática
Para iniciar um vídeo automaticamente, use o autoplayatributo:
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>
Observação: os navegadores Chromium não permitem reprodução automática na maioria dos casos. No entanto, a reprodução automática sem som é sempre permitida.
Adicione muteddepois
autoplaypara permitir que seu vídeo comece a ser reproduzido automaticamente (mas silenciado):
Exemplo
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o
<video>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formatos de vídeo HTML
Existem três formatos de vídeo suportados: MP4, WebM e Ogg. O suporte do navegador para os diferentes formatos é:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Vídeo HTML - Tipos de mídia
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Vídeo HTML - Métodos, Propriedades e Eventos
O HTML DOM define métodos, propriedades e eventos para o <video>elemento.
Isso permite carregar, reproduzir e pausar vídeos, além de definir a duração e o volume.
Há também eventos DOM que podem notificá-lo quando um vídeo começa a ser reproduzido, é pausado etc.
Para obter uma referência completa do DOM, acesse nossa Referência do DOM de áudio/vídeo HTML .
Tags de vídeo HTML
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |