Capítulo 9: Vídeos e Áudio

Multimídia na Web

Conteúdo Multimídia: Vídeos e áudios tornam os sites mais envolventes e informativos. Eles podem mostrar animais em movimento, sons da natureza e criar experiências imersivas!

Nesta aula, vamos aprender a adicionar vídeos e áudios aos nossos sites, criando experiências mais ricas e interativas.

Tag <video>

Incorporar vídeos diretamente no site com controles de reprodução

Links para YouTube

Conectar para vídeos externos usando a tag <a>

Tag <audio>

Adicionar sons e música de fundo para ambientação

Controles e Atributos

Personalizar reprodução com controls, dimensões e mais

1. Incorporando Vídeos - Tag <video>

A tag <video> permite adicionar vídeos diretamente ao site. Diferente das imagens, ela precisa de tag de fechamento!

src = "nome-do-video.mp4" - caminho do arquivo de vídeo

controls - adiciona botões play, pause e volume

width/height = define o tamanho da tela do vídeo

<h2>Documentário: Caatinga</h2>

<video src="caatinga1.mp4" 
       width="400" 
       height="300" 
       controls
       title="Caatinga">
  Seu navegador não suporta a reprodução deste vídeo.
</video>

<p>Assista as belas imagens da caatinga brasileira.</p>
            

Documentário: Caatinga

Player de vídeo com controles de reprodução. Fonte: ShutterStock

2. Usando Tag <source> para Compatibilidade

Para garantir que o vídeo funcione em diferentes navegadores, podemos usar múltiplas fontes:

<video width="380" height="240" controls>
  <source src="urso-pardo.mp4" type="video/mp4">
  <source src="urso-pardo.webm" type="video/webm">
  <source src="urso-pardo.ogg" type="video/ogg">
  Seu navegador não suporta a exibição do vídeo.
</video>
            

Formatos de Vídeo:

MP4: Mais compatível, funciona na maioria dos navegadores
WebM: Formato otimizado para web
OGG: Formato livre, usado em alguns navegadores

3. Links para Vídeos do YouTube

Nem sempre podemos incorporar vídeos diretamente. Uma alternativa é criar links para vídeos no YouTube:

<section id="saibamais">
  <h2>Saiba Mais</h2>
  
  <p>Para maiores informações sobre a fauna da Caatinga: 
    <a href="https://www.youtube.com/watch?v=xjRWPFhxzlA" 
       target="_blank">
      🎥 Assista ao documentário completo
    </a>
  </p>
  
  <p>📚 Acesse também a 
    <a href="https://pt.wikipedia.org/wiki/Caatinga" 
       target="_blank">
      página da Wikipedia sobre a Caatinga
    </a>
  </p>
</section>
            

Saiba Mais

Para maiores informações sobre a fauna da Caatinga: 🎥 Assista ao documentário completo

📚 Acesse também a página da Wikipedia sobre a Caatinga

4. Adicionando Áudio - Tag <audio>

A tag <audio> funciona de forma similar ao vídeo, mas para sons e música:

<h3>Sons da Natureza</h3>

<audio controls>
  <source src="sons-caatinga.mp3" type="audio/mpeg">
  <source src="sons-caatinga.ogg" type="audio/ogg">
  Seu navegador não suporta a reprodução de áudio.
</audio>

<p>🎵 Ouça os sons relaxantes dos animais da Caatinga</p>
            

Como fica na prática:

Player de áudio com controles

5. Atributos Avançados

Tanto vídeo quanto áudio suportam vários atributos para personalizar a experiência:

autoplay - inicia automaticamente (use com cuidado!)

loop - repete continuamente

muted - inicia sem som

preload - controla quando carregar o arquivo

<video width="100%" autoplay muted loop> <source src="paisagem-caatinga.mp4" type="video/mp4"> </video>  <audio controls preload="none"> <source src="ambiente-sertao.mp3" type="audio/mpeg"> </audio>

Dica de Usabilidade: Evite usar autoplay com som, pois pode incomodar os visitantes. Se usar, combine com muted!

🎯 Prepare-se para os Exercícios!

Agora você vai praticar:

Exercício 1: Vídeo simples incorporado com controles
Exercício 2: Links para vídeos externos do YouTube
Exercício 3: Página multimídia completa com vídeo e áudio

Prática: Criando Conteúdo Multimídia

Vamos praticar adicionando vídeos e áudios para criar uma experiência imersiva sobre a fauna da Caatinga!

Aula Atual: Vídeo Incorporado
💡 Dica: Use controles para que os visitantes possam gerenciar a reprodução!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.

Capítulo 9: Vídeos e Áudios