Tag HTML <video>
A tag HTML 5 <video> é usada para incorporar vídeo em documentos HTML. Tutorial W3Docs HTML explica como usar a tag <video> com sintaxe e exemplos.
A tag <video> é um dos elementos HTML5. É usada para incorporar um reprodutor de vídeo em um documento HTML. Esta página cobre como adicionar um vídeo, fornecer múltiplos formatos para suporte entre navegadores, adicionar legendas para acessibilidade e os detalhes sobre autoplay, os atributos poster, preload e loop.
Existem 3 formatos de vídeo amplamente suportados pelo elemento <video>: MP4/MPEG-4, WebM e Ogg. Como nenhum formato único funciona em todos os navegadores, você normalmente fornece vários arquivos usando elementos <source> aninhados (ou um único atributo src). Arquivos de vídeo grandes são comprimidos e descomprimidos com codecs:
- MP4/MPEG-4 — vídeo H.264 com áudio AAC. O formato mais amplamente compatível.
- WebM — vídeo VP8 ou VP9 com áudio Vorbis ou Opus.
- Ogg — vídeo Theora com áudio Vorbis.
O elemento <video> é um elemento substituído com display: block padrão. Para controlar como o quadro é preenchido, use as propriedades CSS object-fit e object-position. Para monitorar o progresso de download e reprodução, use os atributos de evento de mídia.
Você pode adicionar legendas com o elemento <track> e o formato WebVTT (descrito abaixo). O mesmo elemento também pode reproduzir arquivos somente de áudio, embora <audio> seja a melhor escolha para conteúdo apenas de som.
Sintaxe
A tag <video> vem em pares. O conteúdo é escrito entre as tags de abertura (<video>) e fechamento (</video>).
Exemplo da tag HTML <video> com os atributos controls, muted e src:
Exemplo da Tag HTML <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Múltiplas fontes e texto de fallback
Quando você lista vários elementos <source>, o navegador reproduz o primeiro que conseguir decodificar e ignora os demais. Portanto, ordene-os do mais preferido ao menos preferido — geralmente WebM primeiro (menor), depois MP4 (mais compatível) como fallback confiável. O atributo type permite que o navegador ignore um formato que não consegue reproduzir sem baixar o arquivo.
Qualquer conteúdo colocado entre <video> e </video> (além de <source> e <track>) é exibido apenas quando o navegador não consegue reproduzir nenhuma das fontes. Use-o para uma mensagem de fallback e um link de download.
Sempre defina width e height (ou fixe o tamanho no CSS) para que o navegador reserve espaço antes de o vídeo carregar. Isso previne o cumulative layout shift (CLS), onde o conteúdo salta quando o player aparece.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls playsinline>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<!-- Shown only if no source can be played -->
Your browser doesn't support HTML video.
<a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
</video>
<p>Some information about video</p>
</body>
</html>Os atributos controls, autoplay, loop e muted são atributos boolean — não recebem valor. Apenas a sua presença ativa o recurso.
Legendas e subtítulos com <track>
Para acessibilidade, adicione um elemento <track> apontando para um arquivo WebVTT (.vtt). O atributo kind informa ao navegador como tratar a faixa de texto:
subtitles— traduções do diálogo para espectadores que não entendem o idioma.captions— transcrição do diálogo mais sons não verbais importantes (música, efeitos sonoros), para espectadores surdos ou com deficiência auditiva.descriptions— uma descrição textual dos visuais, destinada a ser lida em voz alta para espectadores que não conseguem ver o vídeo.chapters— títulos de capítulos usados para navegar na mídia.
Fornecer legendas para vídeo pré-gravado satisfaz o Critério de Sucesso WCAG 2.1 1.2.2 (Legendas). Use srclang para definir o idioma da faixa e default para ativar uma faixa automaticamente.
<video width="320" height="240" controls>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<track default kind="captions" srclang="en" label="English"
src="/build/videos/arcnet.io(7-sec).vtt" />
</video>Um arquivo WebVTT mínimo tem a seguinte aparência:
WEBVTT
00:00.000 --> 00:04.000
Welcome to the demo video.
00:04.000 --> 00:07.000
[upbeat music playing]Autoplay (e por que precisa de muted)
Para evitar anúncios perturbadores, a maioria dos navegadores bloqueia o autoplay quando há som. Como resultado, autoplay só funciona de forma confiável quando o vídeo também está muted:
<video autoplay muted loop controls playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Mídia com reprodução automática pode ser um sério problema de acessibilidade — pode distrair usuários, interferir com leitores de tela e desencadear problemas para pessoas com transtornos vestibulares. Mantenha os clipes com autoplay sem som, curtos, e prefira deixar os usuários iniciarem a reprodução. Sempre inclua controls para que o vídeo possa ser pausado.
O atributo poster
poster define uma imagem de placeholder exibida antes de o vídeo ser reproduzido (ou até que dados suficientes sejam carregados). Sem ele, os navegadores exibem o primeiro quadro, que muitas vezes é em branco.
<video width="320" height="240" controls poster="/build/videos/cover.jpg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>O atributo preload
preload indica quanto o navegador deve carregar antes da reprodução. É apenas uma dica — o navegador pode ignorá-la (e é ignorado quando autoplay está ativado).
<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>O atributo loop
loop reinicia o vídeo automaticamente cada vez que ele termina. É mais útil para clipes curtos e ambientais de fundo, normalmente combinados com autoplay muted.
<video loop autoplay muted playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Atributos
| Atributos | Valor | Descrição |
|---|---|---|
| autoplay | autoplay | Especifica que o vídeo começará a ser reproduzido automaticamente assim que estiver pronto. |
| controls | controls | Exibe controles que permitem ao usuário controlar a reprodução do vídeo, incluindo volume, busca e pausar/retomar a reprodução. |
| height | pixels | Define a altura do player de vídeo. |
| loop | loop | Especifica que o vídeo recomeçará do início sempre que terminar. |
| muted | muted | Especifica que o vídeo estará inicialmente sem som. |
| poster | URL | Define uma imagem que será exibida enquanto o vídeo está sendo baixado ou até o usuário pressionar o botão de reprodução. |
| preload | auto, metadata, none | Indica quanto conteúdo carregar antes da reprodução (veja os valores abaixo). Ignorado quando autoplay está ativado. |
| src | URL | Define a URL do vídeo incorporado. Um elemento <source> pode ser usado em vez disso. |
| width | pixels | Define a largura do player. |
O atributo preload aceita três valores:
- none — o vídeo não deve ser pré-carregado.
- metadata — apenas metadados como duração e dimensões são obtidos.
- auto — o arquivo de vídeo completo pode ser baixado.
A tag <video> também suporta os Atributos Globais e os Atributos de Evento.
Elementos relacionados
<source>— especifica um dos vários arquivos de mídia para<video>ou<audio>.<track>— adiciona legendas, subtítulos ou capítulos como uma faixa WebVTT.<audio>— incorpora conteúdo apenas de som.