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 with muted for 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>