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

book
Desafio: Incorporar Áudio e Vídeo em HTML

Objetivo

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

Tarefa

Levar o site a um novo patamar, proporcionando aos usuários uma experiência multimídia cativante. 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:

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:

Adicionar controles de reprodução como play e pause.
Adicionar tipos de arquivo.

index.html

index.html

index.css

index.css

copy
<!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>
<!-- Insert audio file -->
<___ ___>
<source src="___" type="___" />
</___>
</div>
</section>

<section>
<div>
<!-- Insert video file -->
<___ ___>
<source src="___" type="___" />
</___>
</div>
</section>
</body>
</html>

  1. Usar a tag audio para especificar um elemento de áudio.

  2. Usar a tag video para especificar um elemento de vídeo.

  3. Usar o atributo controls para permitir que os usuários gerenciem a reprodução de áudio ou vídeo.

  4. Usar o atributo src para especificar a localização do arquivo. Garantir a cópia correta dos links da tarefa.

  5. Usar type="audio/mp3" para especificar o tipo de arquivo correto para o áudio.

  6. Usar type="video/mp4" para especificar o tipo de arquivo correto para o vídeo.

index.html

index.html

index.css

index.css

copy
<!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>
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

some-alt