O que é o elemento de vídeo HTML5?

O elemento <video> do HTML5 é um componente padrão do navegador para incorporar a reprodução de vídeos. Ele pode apontar para um ou mais arquivos de origem e disponibilizar controles de reprodução, legendas, imagens de capa e rótulos de acessibilidade.

Na prática, a marcação de vídeo consiste principalmente em combinar os atributos certos para o seu caso de uso e garantir que o texto alternativo seja significativo.

Descrição da ferramenta

Esta ferramenta gera um bloco <video> pronto para copiar, com atributos comuns como origem, imagem de capa, dimensões, comportamento de pré-carregamento, reprodução automática, loop e controles. Ela também exibe uma pré-visualização ao vivo no navegador.

É útil quando você quer montar rapidamente uma marcação de vídeo sem precisar memorizar o nome de cada atributo.

Exemplos

  • Um vídeo incorporado padrão com controles e uma imagem de capa
  • Um vídeo de fundo em loop e sem som
  • Uma tag de vídeo responsiva com texto alternativo personalizado

Recursos

  • Muitos atributos comuns de vídeo do HTML5 em um só lugar
  • Texto alternativo editável para navegadores incompatíveis
  • HTML gerado e pré-visualização em sandbox lado a lado

Como funciona

A ferramenta cria a marcação <video> com base nas opções selecionadas e renderiza uma pré-visualização usando, sempre que possível, as mesmas configurações de origem. O código gerado foi projetado para ser copiado para a sua própria página.

A pré-visualização ainda depende da capacidade do navegador de carregar a URL da mídia, portanto o sucesso da reprodução depende da própria origem.