Antes do HTML5, inserir áudio e vídeo em sites era complicado e dependia de plugins externos. Hoje, o próprio HTML resolve isso de forma simples, acessível e padronizada.

Nesta aula, vamos aprender a usar áudio e vídeo diretamente no HTML.

Áudio no HTML5 — <audio>

A tag <audio> permite inserir arquivos de áudio na página. 

 <audio> </audio>

Sozinha, ela não exibe controles. Para isso, usamos um atributo importante.

O atributo controls

O atributo controls exibe os botões de play, pause e volume. 

 <audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio>
Sem controls, o usuário não consegue interagir com o áudio.

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

Texto alternativo para áudio

Dentro da tag <audio>, podemos colocar um texto alternativo. Ele aparece caso o navegador não suporte o recurso. 

 
  <audio controls> <source src="audio.mp3" type="audio/mpeg"> 
  Seu navegador não suporta áudio. 
  </audio>

Vídeo no HTML5 — <video>

Para vídeos, usamos a tag <video>. Ela funciona de forma muito parecida com o áudio. 

 <video> </video>

Controles de vídeo

Assim como no áudio, usamos controls para permitir interação. 

 <video controls> <source src="video.mp4" type="video/mp4"> </video>

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

É comum também definir largura e altura: 

 <video controls width="400"> <source src="video.mp4" type="video/mp4"> </video>

Atributos comuns em mídia

  • controls — exibe controles
  • autoplay — inicia automaticamente
  • loop — repete o conteúdo
  • muted — inicia sem som
Evite autoplay com som. Isso prejudica a experiência do usuário.

HTML5 vs embeds externos

Sempre que possível, prefira:

  • HTML5 para arquivos próprios
  • Embeds (YouTube, Spotify) para conteúdo externo

O HTML5 cuida bem do que é seu. Plataformas externas cuidam do que é delas.

💾🧠 Resumo da aula para nunca mais esquecer

  • <audio> insere áudio no HTML
  • <video> insere vídeo no HTML
  • O atributo controls permite interação
  • HTML5 elimina a necessidade de plugins externos

Na próxima aula, vamos falar sobre acessibilidade básica no HTML e aprender a pensar em todos os usuários 💙

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.