Challenge: Indlejr Lyd og Video i HTML
Stryg for at vise menuen
Mål
Skab en engagerende multimedieoplevelse for besøgende på hjemmesiden ved at integrere både lyd- og videoindhold.
Opgave
Tag hjemmesiden til næste niveau ved at give brugerne en fængslende multimedieoplevelse. Din opgave er:
For lyd: indlejr en lydfil, der skaber en beroligende atmosfære for brugerne. Brug følgende link til lyden:
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3
For videoen: integrer en video, der lader brugerne nyde naturens skabningers skønhed. Brug følgende link til videoen:
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4
Tilføj afspilningskontroller som afspil og pause.
Tilføj filtyper.
index.html
index.css
Tip
- Brug
<audio>-tagget til at angive et lyd-element; - Brug
<video>-tagget til at angive et video-element; - Brug attributten
controlsfor at give brugerne mulighed for at styre afspilning af lyd eller video; - Brug attributten
srctil at angive filplaceringen. Sørg for, at linkene er kopieret korrekt fra opgaven; - Brug
type="audio/mp3"for at angive den korrekte filtype for lyd; - Brug
type="video/mp4"for at angive den korrekte filtype for video.
Løsning
<!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>
Var alt klart?
Tak for dine kommentarer!
Sektion 4. Kapitel 7
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Sektion 4. Kapitel 7