Vídeo HTML

A visão geral de Mídia apontou várias famílias. Esta sessão foca em uma: o elemento video para clips e demos que você hospeda. Dê aos visitantes UI de play/pause com controls em vez de surpreendê-los com som iniciado automaticamente.

O que video faz

video pede ao navegador que busque um arquivo de filme e o desenhe na página. Você pode apontar um arquivo com src, ou listar vários filhos <source> para o navegador escolher um formato suportado. Atributos opcionais reservam tamanho (width / height), mostram um quadro fixo antes da reprodução (poster) e expõem os controles nativos.

Resposta direta

Use <video controls src="movie.mp4"> ou aninhe filhos <source> para vários formatos. Adicione uma imagem poster para um quadro de prévia antes da reprodução. Inclua texto de fallback curto (e opcionalmente um link de download) dentro de video para agentes que não conseguem reproduzir a mídia. Prefira arquivos compactados e de tamanho razoável.

Vídeo simples com controls

Um único MP4 mais controls e uma largura bastam para muitas páginas de ensino.

Lendo a amostra simples

• controls pede ao navegador a UI de play/pause
• width="480" ajuda a reservar espaço de layout enquanto o arquivo carrega
• src aponta para o arquivo de filme na sua pasta media
• O texto dentro de video é conteúdo de fallback quando o elemento não é suportado

Várias fontes e um poster

Os navegadores diferem no conforto com formatos. Listar WebM e MP4 com dicas type, mais uma imagem fixa poster, é um padrão prático comum.

Lendo a amostra multi-fonte

• poster mostra uma imagem de prévia até o início da reprodução
• Cada source nomeia um arquivo e um type MIME
• O navegador escolhe a primeira fonte que consegue reproduzir
• O link de download dentro ajuda quando a reprodução está indisponível

Tamanho de arquivo e formatos

Exportações enormes de câmera travam em redes lentas. Exporte um MP4 tamanho web (e opcionalmente WebM) que combine com a necessidade de ensino — demos curtas vencem masters de vários gigabytes em uma página de lição. Você não precisa de cada contêiner no primeiro dia; faça um MP4 claro funcionar, depois adicione um segundo formato se o público exigir.

Autoplay: aprenda controls primeiro

Autoplay com som costuma ser bloqueado e geralmente é má educação. Truques de autoplay mudo existem para heróis de marketing, mas iniciantes devem dominar controls e reprodução iniciada pelo usuário primeiro. Quando precisar de autoplay depois, leia com cuidado as políticas dos navegadores e mantenha um caminho de pause acessível.

Legendas e acessibilidade (hábito)

Se o conteúdo falado ensina algo importante, planeje legendas ou uma transcrição — mesmo que você conecte elementos track completos em um passo posterior. Não confie só na imagem poster como único resumo acessível de uma lição falada na câmera.

Largura, altura e layout

Definir width (e height correspondente quando você conhece a proporção) reduz o salto de layout enquanto os metadados do vídeo carregam. Esticar com números incompatíveis fica errado; mantenha a proporção real em mente do mesmo modo que fez com imagens.

Pratique no seu editor

1. Coloque um .mp4 curto em uma pasta media.
2. Incorpore-o com video + controls + uma largura sensata.
3. Adicione texto de fallback dentro do elemento.
4. Opcionalmente adicione uma imagem poster e um segundo formato source.
5. Abra a página, reproduza e pause, depois teste com a rede limitada se puder — note por que o tamanho do arquivo importa.

Erros fáceis

• Faltar controls para que os usuários não consigam reproduzir com facilidade
• Enviar arquivos enormes sem compressão que travam em redes lentas
• Esquecer texto de fallback ou um link de download
• Ir para autoplay com som antes de entender o básico
• Colocar alt em video como em img (use legendas/transcrições e descrições visíveis)
• Confundir embeds YouTube hospedados (iframe) com arquivos video auto-hospedados

Resumo

• video incorpora arquivos de filme que você hospeda
• Use controls para a UI de reprodução
• Várias tags source melhoram o suporte a formatos
• poster mostra um quadro de prévia antes da reprodução
• Prefira arquivos compactados e evite som de autoplay surpresa