Uitdaging: Audio en video insluiten in HTML
Veeg om het menu te tonen
Doel
Een boeiende multimedia-ervaring creëren voor websitebezoekers door zowel audio- als videocontent te integreren.
Opdracht
De website naar een hoger niveau tillen door gebruikers onder te dompelen in een meeslepende multimedia-ervaring. De opdracht:
Voor de audio: een audiobestand insluiten dat een rustgevende sfeer biedt zodat gebruikers kunnen ontspannen. Gebruik de volgende link voor de audio:
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3
Voor de video: integreer een video waarmee gebruikers kunnen genieten van de schoonheid van natuurwezens. Gebruik de volgende link voor de video:
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4
Voeg afspeelbediening toe zoals afspelen en pauzeren.
Voeg bestandstypen toe.
index.html
index.css
- Gebruik de
<audio>-tag om een audio-element te specificeren; - Gebruik de
<video>-tag om een video-element te specificeren; - Gebruik het
controls-attribuut om gebruikers audio- of videoweergave te laten beheren; - Gebruik het
src-attribuut om de bestandslocatie op te geven. Zorg ervoor dat de links nauwkeurig zijn gekopieerd uit de opdracht; - Gebruik
type="audio/mp3"om het juiste bestandstype voor audio aan te geven; - Gebruik
type="video/mp4"om het juiste bestandstype voor video aan te geven.
<!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>
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.