HTML video: controles, reprodução automática, tamanho responsivo e problemas

HTML video incorpora um player de vídeo em uma página da web. Defina o URL do arquivo com src ou elementos filhos source e adicione controls para que os usuários possam reproduzir e pausar. Políticas do navegador podem bloquear a reprodução automática mesmo quando o autoplay está presente.

Escolha atributos para a experiência de reprodução

controls, muted, autoplay, e loop são atributos booleanos. Sua presença os habilita, então autoplay="false" não desativa a reprodução automática. Remova o atributo para desativá-la. Uma solicitação de reprodução automática precisa do carregamento da mídia, então preload="none" sozinho não pode impedir o download.

Execute um exemplo de vídeo completo

Salve este código como video.html e abra-o em um navegador. Ele carrega a amostra pública de flores usada na documentação da MDN e precisa de conexão com a internet. Para seu próprio serviço, hospede o vídeo que você tem direito de usar e substitua os URLs.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reprodução de vídeo HTML</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Vídeo de flores</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Flores ao vento">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    Este navegador não suporta o elemento video.
  </video>
  <p>Descrição: as flores e a grama próxima se movem com o vento.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">Abrir o arquivo de vídeo MP4</a></p>
</body>
</html>

1. Verifique se há um reprodutor com um botão de play e inicie-o. As flores devem se mover e a posição de reprodução deve avançar. O exemplo padrão não possui atributo de reprodução automática ou de loop.
2. Pausar a reprodução para parar o movimento. Em uma janela estreita, o reprodutor deve encolher dentro da largura do conteúdo.
3. Para comparar a repetição, adicione apenas loop à tag de vídeo de abertura e reabra o arquivo. Verifique se a reprodução retorna ao início após chegar ao fim, então remova o atributo para restaurar o comportamento original.

source oferece formatos de arquivo para que o navegador possa escolher um candidato suportado. Prepare arquivos reais WebM e MP4 do mesmo vídeo; alterar a extensão do nome do arquivo não converte os formatos. A reprodução também depende dos codecs usados para vídeo e áudio dentro de um contêiner como MP4.

Reprodução automática e dimensionamento em dispositivos móveis

Se você precisar de reprodução automática, compare adicionando autoplay muted à tag de vídeo de abertura. Mantenha playsinline e controles. Preferências do usuário, políticas de economia de energia, histórico de interação no site ou outras regras do navegador podem negar a reprodução automática, então mantenha um botão de reprodução.

O CSS width: 640px é a largura de exibição desejada, enquanto max-width: 100% limita o transbordamento em um contêiner estreito. height: auto preserva a proporção do vídeo. Se você definir um quadro de proporção fixa, object-fit: contain preserva toda a cena, enquanto cover preenche o quadro cortando algumas bordas; verifique se o conteúdo importante permanece visível.

Solução de problemas de reprodução e verificação de acessibilidade

• URL do arquivo: Abra o link do vídeo diretamente e confirme se o arquivo existe e está disponível sem login. Verifique se um caminho local não foi confundido com um caminho de servidor e se a capitalização do nome do arquivo corresponde.
• Formato e resposta: Verifique se o servidor envia o tipo MIME correto video/mp4 ou video/webm e usa codecs suportados. O painel de Rede nas ferramentas de desenvolvedor ajuda a inspecionar solicitações falhas e cabeçalhos de resposta.
• Reprodução automática: Se apertar Play funcionar, diferencie uma restrição de reprodução automática de um arquivo corrompido.
• Orientação de substituição: O texto dentro do vídeo é para navegadores que não suportam o elemento. Em navegadores modernos, uma falha de carregamento não o exibe automaticamente como uma mensagem de erro. O exemplo, portanto, coloca um link do arquivo e descrição da cena fora do player também.
• Legendas e descrições: Forneça legendas precisas e uma transcrição, quando necessário, para o discurso. Conecte legendas com track e um arquivo WebVTT. Considere uma descrição de texto ou descrição em áudio para informações essenciais transmitidas apenas visualmente.

Veja a referência de vídeo do MDN para atributos e o guia do MDN sobre legendas de vídeo para arquivos de legendas.