Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Udfordring: Indlejr Lyd og Video i HTML | Arbejde med Medier og Tabeller
Ultimativ HTML

book
Udfordring: Indlejr Lyd og Video i HTML

Mål

Skab en engagerende multimedieoplevelse for webstedets besøgende ved at inkorporere både lyd- og videoindhold.

Opgave

Tag webstedet til det næste niveau ved at fordybe brugerne i en fængslende multimedieoplevelse. Din opgave er at:

For lyden: indlejre en lydfil, der skaber en beroligende atmosfære for brugerne at slappe af. Brug følgende link til lyden:

For videoen: integrer en video, der lader brugerne nyde skønheden af naturens skabninger. Brug følgende link til videoen:

Tilføj afspilningskontroller som afspil og pause.
Tilføj filtyper.

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. Brug audio-tagget til at angive et lydelement.

  2. Brug video-tagget til at angive et videoelement.

  3. Brug controls-attributten for at give brugerne mulighed for at styre lyd- eller videoplayback.

  4. Brug src-attributten til at angive filens placering. Sørg for nøjagtig kopiering af links fra opgaven.

  5. Brug type="audio/mp3" for at angive den korrekte filtype for lyden.

  6. Brug type="video/mp4" for at angive den korrekte filtype for videoen.

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>
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 6

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

some-alt