HTML & CSS

Mídia em HTML: como inserir vídeo, áudio e YouTube na página

Você abre o site de uma cafeteria e, logo na primeira tela, um vídeo curto mostra o barista preparando um café. Mais embaixo, uma vinheta de áudio toca ao clicar num botão, e o cardápio aparece em PDF sem sair da página. Nada disso exige programação: tudo é feito com tags HTML.

Neste artigo você vai aprender a colocar vídeo, áudio, vídeos do YouTube e PDFs numa página, entender os atributos de cada tag e evitar os problemas mais comuns, como o vídeo que “não toca” ou o som que começa sozinho e assusta o visitante. O exemplo será, mais uma vez, a Cafeteria Grão Dourado.

As tags de mídia: visão geral

Antigamente, tocar um vídeo numa página dependia de plug-ins instalados no navegador, como o Flash. Hoje o próprio navegador sabe reproduzir mídia, e o HTML5 trouxe tags específicas para isso:

TagPara que serve
<video>Reproduz um arquivo de vídeo, com controles prontos
<audio>Reproduz um arquivo de áudio
<source>Indica um arquivo (e seu formato) dentro de <video> ou <audio>
<track>Adiciona legendas ao vídeo
<iframe>Mostra outra página dentro da sua, como um vídeo do YouTube
<object> e <embed>Incorporam conteúdo externo, hoje usados principalmente para PDF

Vídeo com <video>

A tag <video> mostra o player do próprio navegador, com botão de play, barra de progresso, volume e tela cheia. Veja a estrutura completa:

Anatomia da tag video: atributos, arquivos alternativos com source e texto de reserva <video width=”640″ height=”360″ controls> <source src=”video/cafe.mp4″ type=”video/mp4″> <source src=”video/cafe.webm” type=”video/webm”> Seu navegador não suporta vídeo. </video> atributostamanho e controles sourceo navegador usa o primeiroformato que entender texto de reservasó aparece se o navegadornão conhecer a tag video A tag <video> precisa de abertura e de fechamento.
Dentro de <video> ficam os arquivos (<source>) e, no fim, o texto de reserva.

Atributos mais usados

AtributoO que faz
controlsMostra os controles (play, pausa, volume, tela cheia). Sem ele, o vídeo aparece como uma imagem parada
width e heightLargura e altura em pixels. Defina sempre os dois: assim a página reserva o espaço e não “pula” quando o vídeo carrega
posterImagem exibida antes de o vídeo começar
autoplayComeça a tocar sozinho (veja a dica sobre autoplay mais adiante)
mutedComeça sem som
loopRecomeça quando termina
preloadDiz ao navegador quanto carregar antes do play: none (nada), metadata (só duração e tamanho) ou auto

Atributos como controls, loop e muted são booleanos: basta escrevê-los para ligar a função, sem valor. Teste você mesmo: ligue e desligue as opções abaixo e veja o código mudar.

Teste ao vivo: atributos do vídeo
Dica: sem controls, o visitante não tem como dar play. Se você tirar o atributo no teste acima, o player some. É o erro mais comum de quem está começando.

Vários formatos com <source>

Nem todo navegador entende todos os formatos de vídeo. Por isso, em vez de usar src direto na tag <video>, é comum listar mais de um arquivo com <source>. O navegador percorre a lista de cima para baixo e usa o primeiro formato que reconhecer. O atributo type ajuda nessa escolha, porque ele descobre o formato sem precisar baixar o arquivo.

MP4type="video/mp4"
O mais compatível. Funciona nos principais navegadores.
WebMtype="video/webm"
Formato aberto, leve e também aceito pelos principais navegadores.
Oggtype="video/ogg"
Antigo. O Safari não o suporta, então raramente vale a pena.
Dica: hoje, um arquivo MP4 costuma bastar. Oferecer também o WebM é uma segurança extra e, em alguns casos, reduz o tamanho do arquivo.

Legendas com <track>

A tag <track> liga um arquivo de legendas ao vídeo. É ótima para acessibilidade (pessoas surdas ou com dificuldade de audição) e para quem assiste sem som. O arquivo usa o formato WebVTT (extensão .vtt), que é só um texto com os tempos de cada fala:

video/legenda.vtt 
WEBVTT

00:00:00.000 --> 00:00:03.000
Bem-vindo à Cafeteria Grão Dourado!

00:00:03.000 --> 00:00:06.000
Este é um vídeo de exemplo para a aula.

No HTML, a tag <track> fica dentro do <video>, junto dos <source>:

<video width="640" height="360" controls>
  <source src="video/cafe.mp4" type="video/mp4">
  <source src="video/cafe.webm" type="video/webm">
  <track src="video/legenda.vtt" kind="subtitles" srclang="pt" label="Português" default>
  Seu navegador não suporta vídeo.
</video>

Veja funcionando. Aperte o play e, se a legenda não aparecer, procure o botão CC (ou o menu ⋮) do player para ligá-la ou desligá-la:

Teste ao vivo: vídeo com legenda
  • kind="subtitles": tipo da faixa (legendas).
  • srclang="pt": idioma da legenda.
  • label: nome que aparece no menu do player.
  • default: já deixa a legenda ligada.
Dica: o navegador costuma carregar o arquivo de legenda só quando a página é aberta por um servidor (como o Live Server do VS Code). Se a legenda não aparecer ao abrir o arquivo com dois cliques, teste pelo Live Server.

Áudio com <audio>

A tag <audio> funciona quase igual à de vídeo, só que sem imagem: o navegador mostra uma barra compacta de reprodução. Use para vinhetas, podcasts, trilhas e locuções.

<audio controls>
  <source src="audio/jingle.mp3" type="audio/mpeg">
  <source src="audio/jingle.ogg" type="audio/ogg">
  Seu navegador não suporta áudio.
</audio>
Teste ao vivo: player de áudio
FormatotypeObservação
MP3audio/mpegCompatível com todos os navegadores principais
WAVaudio/wavCompatível, mas gera arquivos grandes
OGGaudio/oggNão funciona no Safari

E o autoplay?

O atributo autoplay faz a mídia tocar assim que a página abre. Parece prático, mas é um dos recursos que mais irritam o visitante: imagine abrir um site no trabalho e ele começar a falar. Por isso, os navegadores baseados no Chromium, como Chrome e Edge, bloqueiam na maioria dos casos o autoplay com som. A exceção é o autoplay sem som: com muted, ele é sempre permitido.

<video width="640" height="360" autoplay muted loop>
  <source src="video/cafe.mp4" type="video/mp4">
</video>
Boa prática: use autoplay muted apenas em vídeos decorativos, como um fundo animado. Para o conteúdo principal, deixe o visitante decidir quando dar play, e sempre mantenha o controls.

Vídeos do YouTube com <iframe>

Hospedar vídeo no seu próprio site tem um custo: arquivos pesados deixam a página lenta e gastam o espaço da hospedagem. Uma solução é publicar o vídeo no YouTube e incorporá-lo na página com um <iframe>, que mostra o player do YouTube dentro do seu site. Quem carrega o arquivo é o YouTube, não o seu servidor.

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/SEU_ID_DO_VIDEO"
        title="Vídeo da Cafeteria Grão Dourado"
        allowfullscreen></iframe>

Onde encontrar o ID do vídeo

O ID é o código que aparece no endereço do vídeo, logo depois de v=. Por exemplo, em youtube.com/watch?v=ABC123 o ID é ABC123. Ele entra no src do iframe, depois de /embed/. O YouTube também oferece o código pronto: no vídeo, clique em Compartilhar e depois em Incorporar.

Anatomia do endereço de incorporação do YouTube: caminho base, ID do vídeo e parâmetros depois do ponto de interrogação https://www.youtube.com/embed/ ID_DO_VIDEO ? autoplay=1&mute=1 endereço do playerigual para todos os vídeos IDmuda a cada vídeo parâmetrosnome=valor, separados por & O ? separa o endereço dos parâmetros.
Os parâmetros funcionam como os dados de um formulário com method="get": depois do ?, em pares nome=valor.

Parâmetros do player

ParâmetroEfeito
autoplay=1Começa sozinho (o Chromium costuma bloquear se não houver mute=1)
mute=1Começa sem som
loop=1Repete o vídeo. Só funciona junto com playlist=ID_DO_VIDEO, com o mesmo ID
controls=0Esconde os controles (o padrão é controls=1)

Monte o seu: cole o ID, marque os parâmetros e copie o código pronto.

Teste ao vivo: montador de iframe
Acessibilidade: sempre coloque o atributo title no iframe. Leitores de tela usam esse texto para dizer ao usuário o que existe ali dentro. E allowfullscreen permite ao visitante assistir em tela cheia.

PDF e outros conteúdos com <object> e <embed>

As tags <object> e <embed> foram criadas para plug-ins, como Flash e applets Java. Esses plug-ins deixaram de existir nos navegadores modernos, então esse uso morreu. Hoje as duas servem para incorporar coisas simples, como uma imagem, outra página HTML ou, o uso mais prático, um PDF:

<object data="docs/cardapio.pdf" type="application/pdf" width="640" height="400">
  Seu navegador não mostra PDF aqui.
  <a href="docs/cardapio.pdf">Abra o cardápio em PDF</a>.
</object>
  • <object> usa o atributo data para apontar o arquivo e permite um texto de reserva entre as tags (o link para baixar o PDF, por exemplo).
  • <embed> usa src, não tem tag de fechamento e não aceita texto de reserva: <embed src="docs/cardapio.pdf" width="640" height="400">.
Dica: em celulares, muitos navegadores não mostram PDF dentro da página e oferecem o arquivo para download. Por isso o texto de reserva com um link para o PDF é importante: é ele que garante o acesso.

Boas práticas com mídia

  • Defina width e height em vídeos e iframes, para a página não “pular” durante o carregamento.
  • Evite autoplay com som. Quando precisar de autoplay, use muted.
  • Cuide do peso dos arquivos. Vídeos longos e pesados deixam o site lento: comprima o vídeo ou publique no YouTube e incorpore.
  • Ofereça alternativas: legendas com <track>, texto de reserva com link de download e title nos iframes.
  • Respeite os direitos autorais. Use mídia própria ou com licença que permita o uso, inclusive música e vídeos em sites com anúncios.
  • Organize em pastas (video/, audio/, imagem/, docs/) e confira os caminhos dos arquivos.

Erros comuns

1. Esquecer o controls

Sem ele, o player não aparece e o visitante não consegue dar play (a não ser que haja autoplay).

2. Caminho do arquivo errado

Se o src aponta para uma pasta ou nome que não existe, o vídeo não carrega. Confira maiúsculas, minúsculas e a extensão do arquivo.

3. Usar um formato que o navegador não conhece

Um arquivo em formato raro simplesmente não toca. Prefira MP4 para vídeo e MP3 para áudio, e confira se o type corresponde ao arquivo.

4. Esperar autoplay com som

O navegador bloqueia. Se o vídeo precisa começar sozinho, use autoplay muted.

5. loop=1 no YouTube sem playlist

O parâmetro loop só funciona se vier acompanhado de playlist= com o mesmo ID do vídeo.

6. Esquecer o title do iframe

A página funciona, mas fica menos acessível para quem usa leitor de tela.

7. Tentar usar <embed> ou <object> para Flash

O Flash não funciona mais em nenhum navegador moderno. Use <video>.

Código completo do exemplo

O projeto reúne tudo numa só página: vídeo com legenda, áudio, YouTube e PDF. Os arquivos de mídia do .zip já estão prontos. Salve a pasta inteira e abra o index.html, de preferência pelo Live Server:

Baixe o projeto completo: o arquivo midia-html.zip traz o index.html e todos os arquivos de vídeo, áudio, legenda, imagem e PDF, prontos para usar na aula.

⬇ Baixar midia-html.zip
midia-html/
├── index.html
├── video/
│   ├── cafe.mp4
│   ├── cafe.webm
│   └── legenda.vtt
├── audio/
│   ├── jingle.mp3
│   └── jingle.ogg
├── imagem/
│   └── poster.jpg
└── docs/
    └── cardapio.pdf
index.html 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mídia em HTML — Cafeteria Grão Dourado</title>
</head>
<body>

  <h1>☕ Cafeteria Grão Dourado</h1>
  <p>Vídeo, áudio, YouTube e PDF em uma única página.</p>

  <!-- ===== VÍDEO ===== -->
  <h2>Nosso vídeo</h2>
  <video width="640" height="360" controls poster="imagem/poster.jpg" preload="metadata">
    <source src="video/cafe.mp4" type="video/mp4">
    <source src="video/cafe.webm" type="video/webm">
    <track src="video/legenda.vtt" kind="subtitles" srclang="pt" label="Português" default>
    Seu navegador não suporta vídeo.
    <a href="video/cafe.mp4">Baixe o vídeo (MP4)</a>.
  </video>

  <!-- ===== ÁUDIO ===== -->
  <h2>Nossa vinheta</h2>
  <audio controls>
    <source src="audio/jingle.mp3" type="audio/mpeg">
    <source src="audio/jingle.ogg" type="audio/ogg">
    Seu navegador não suporta áudio.
    <a href="audio/jingle.mp3">Baixe a vinheta (MP3)</a>.
  </audio>

  <!-- ===== YOUTUBE ===== -->
  <h2>Vídeo do YouTube</h2>
  <!-- Troque SEU_ID_DO_VIDEO pelo código que aparece depois de "v=" no endereço do vídeo -->
  <iframe width="560" height="315"
          src="https://www.youtube.com/embed/SEU_ID_DO_VIDEO"
          title="Vídeo da Cafeteria Grão Dourado"
          allowfullscreen></iframe>

  <!-- ===== PDF ===== -->
  <h2>Nosso cardápio</h2>
  <object data="docs/cardapio.pdf" type="application/pdf" width="640" height="400">
    Seu navegador não mostra PDF aqui.
    <a href="docs/cardapio.pdf">Abra o cardápio em PDF</a>.
  </object>

</body>
</html>

Para o bloco do YouTube funcionar, troque SEU_ID_DO_VIDEO pelo ID de um vídeo seu (ou de um vídeo que permita incorporação).

Resumo rápido

Tag ou atributoPara que serve
<video controls>Vídeo com player do navegador
<audio controls>Áudio com player do navegador
<source src type>Arquivos alternativos; vale o primeiro formato reconhecido
<track>Legendas em arquivo .vtt
poster, preloadImagem inicial e quanto carregar antes do play
autoplay + mutedInício automático (só sem som é garantido)
<iframe src="…/embed/ID">Incorpora vídeo do YouTube
<object data> / <embed src>Incorporam PDF, imagem ou HTML

Desafio para praticar

  1. Monte o projeto, abra pelo Live Server e teste cada mídia. Depois troque o poster por uma imagem sua.
  2. Apague o controls do vídeo e recarregue. O que acontece? Depois recoloque.
  3. Troque o caminho do MP4 por um nome errado. O WebM assume? E se errar os dois, o que aparece?
  4. Substitua SEU_ID_DO_VIDEO pelo ID de um vídeo do YouTube e acrescente ?autoplay=1&mute=1.
  5. Desafio extra: grave um áudio de 5 segundos no celular, converta para MP3 e coloque na página com <audio>.

Para saber mais

Washington Paiva — instrutor de Desenvolvimento de Sistemas · washington.pro.br

Compartilhe:

prof.wsp

Profissional engajado com as últimas tendências tecnológicas e de gestão, buscando continuamente aprimorar suas competências e compartilhar seu conhecimento.

view all posts

Postagens relacionadas

Publicar comentário

Vale a pena conferir