Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Incorporar Áudio e Vídeo em HTML | Trabalhando com Mídia e Tabelas
HTML Definitivo

Desafio: Incorporar Áudio e Vídeo em HTML

Deslize para mostrar o menu

Objetivo

Criar uma experiência multimídia envolvente para os visitantes do site, incorporando conteúdo de áudio e vídeo.

Tarefa

Levar o site a um novo patamar, proporcionando aos usuários uma experiência multimídia envolvente. Sua tarefa é:

Para o áudio: incorporar um arquivo de áudio que ofereça uma atmosfera relaxante para os usuários. Utilize o seguinte link para o áudio:

https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3

Para o vídeo: integrar um vídeo que permita aos usuários apreciar a beleza das criaturas da natureza. Utilize o seguinte link para o vídeo:

https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4

Adicionar controles de reprodução como reproduzir e pausar.
Adicionar tipos de arquivo.

index.html

index.html

index.css

index.css

Dica
expand arrow
  1. Use a tag <audio> para especificar um elemento de áudio;
  2. Use a tag <video> para especificar um elemento de vídeo;
  3. Use o atributo controls para permitir que os usuários controlem a reprodução de áudio ou vídeo;
  4. Use o atributo src para especificar o local do arquivo. Certifique-se de que os links sejam copiados corretamente da tarefa;
  5. Use type="audio/mp3" para especificar o tipo de arquivo correto para o áudio;
  6. Use type="video/mp4" para especificar o tipo de arquivo correto para o vídeo.
Solução
expand arrow
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>
      <h1>Welcome to Multimedia</h1>
      <p>Enjoy the audio and video content below!</p>
    </header>

    <section>
      <div>
        <!-- Audio file -->
        <audio controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3"
            type="audio/mp3"
          />
        </audio>
      </div>
    </section>

    <section>
      <div>
        <!-- Video file -->
        <video controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </section>
  </body>
</html>
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Seção 4. Capítulo 7
some-alt