In HTML, multimedia refers to audio, video, and interactive content that can be added to a webpage to make it more engaging.
HTML5 introduced built-in tags so you no longer need extra plugins like Flash.

---

1. Multimedia Types in HTML

• Audio → Music, sound effects, voice recordings.
• Video → Movies, clips, animations.
• Images → Photos, illustrations.
• Interactive content → Maps, embedded players, 3D models.

---

2. Audio in HTML

You can use the <audio> tag to embed sound.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Attributes:

• controls → Shows play/pause buttons.
• autoplay → Plays automatically (can be annoying).
• loop → Repeats the audio.
• muted → Starts muted.

---

3. Video in HTML

Use the <video> tag for videos.

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Attributes:

• controls → Play, pause, volume, etc.
• autoplay → Starts playing automatically.
• loop → Repeats the video.
• poster → Image displayed before the video plays.
• muted → Starts with sound off.

---

4. Embedding External Multimedia

YouTube Video Example:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID" 
title="YouTube video" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

• <iframe> allows embedding videos, maps, or other web pages.

---

5. Images in Multimedia Context

Even though <img> is for images, when combined with <figure> and <figcaption>, it becomes part of multimedia presentation.

<figure>
  <img src="photo.jpg" alt="Beautiful sunset">
  <figcaption>Sunset at the beach</figcaption>
</figure>

---

6. Interactive & Advanced Multimedia

• Maps:

<iframe src="https://www.google.com/maps/embed?..."></iframe>

• SVG (Scalable Vector Graphics):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
``>
- **Canvas for animations & games**:
```html
<canvas id="myCanvas" width="200" height="100"></canvas>

---

✅ Best Practices:

• Provide multiple formats (.mp4, .ogg) for cross-browser compatibility.
• Always use alt text for images and captions for audio/video.
• Avoid autoplay unless absolutely necessary.
• Keep file sizes optimized for faster loading.

---