Multimedia in HTML
HTML multimedia elements allow us to add audio, video, animations, and interactive graphics to webpages. These features make websites more engaging, user-friendly, and modern.
- Enhances user experience and engagement
- Improves accessibility for screen readers
Audio in HTML (<audio>)
The <audio> tag is used to embed sound files (music, podcasts, voice recordings) in a webpage.
Basic Syntax:
<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 of <audio>:
controls→ Displays play, pause, and volume controls.autoplay→ Plays audio automatically when the page loads.loop→ Repeats audio continuously.muted→ Starts audio in muted mode.
Video in HTML (<video>)
The <video> tag is used to embed videos directly into a webpage.
Basic Syntax:
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes of <video>:
controls→ Adds video controls (play, pause, volume).autoplay→ Plays video automatically (use withmutedfor SEO).loop→ Repeats the video continuously.poster→ Adds a thumbnail image before video plays.muted→ Starts video with no sound.
Subtitles & Captions (<track>):
Improves accessibility for hearing-impaired users.
Basic Syntax:
<video width="560" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Lazy Loading Media:
Reduces page load time by loading media only when visible.
<video src="video.mp4" controls loading="lazy" width="560"></video>