HTML Tutorial
HTML Embed Multimedia
HTML provides several tags to embed multimedia such as images, audio, video, and external content directly into a webpage. These elements enhance user experience by adding visual and interactive components.
1. Embedding Images
Use the <img> tag to display images.
<img src="image.jpg" alt="Description of image" width="300">Common attributes
- src – Path of the image
- alt – Alternative text
- width / height – Resize image
2. Embedding Audio
Use the <audio> tag to play sound files.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>Features
- Supports MP3, WAV, OGG formats
- Allows play/pause, volume, looping
3. Embedding Video
Use the <video> tag to show video content.
<video width="400" controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>
Features
- Supports MP4, WebM, OGG
- Can autoplay, loop, mute
- poster displays an image before playback
4. <source> Tag
Used inside <audio> and <video> to provide multiple file formats.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>This ensures broader browser support.
5. Adding Subtitles with
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
6. Embedding External Content using <iframe>
<iframe src="https://example.com" width="600" height="400"></iframe>
Use cases:
- YouTube videos
- Google Maps
- External websites
7. Grouping Media Using <figure> and <figcaption>
<figure>
<img src="photo.jpg" alt="Nature">
<figcaption>A beautiful nature scene</figcaption>
</figure>Summary
HTML multimedia makes websites more interactive through:
- Images (<img>)
- Audio (<audio>)
- Video (<video>)
- External embeds (<iframe>)
- Captions & subtitles (<track>, <figcaption>)
- Media grouping (<figure>)