DAY 2 OF HTML

Today I dove deeper into HTML multimedia elements, focusing on how to embed audio and video content. Here's what I discovered:

---

🎵 The <source> Element

The <source> element provides multiple media resources for <audio> and <video> elements, allowing the browser to choose the most appropriate format it supports.

Key Source Attributes:

• src — specifies the file path or URL of the media file
• type — indicates the MIME type of the file (helps browser determine compatibility)
• media — specifies media queries for responsive media

Example:

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

🎧 Audio Element

The <audio> tag embeds sound content in web pages.

Common Audio Attributes:

• controls — displays play, pause, and volume controls
• loop — makes the audio repeat continuously
• muted — starts the audio muted
• autoplay — automatically starts playing (use carefully!)
• preload — specifies how much audio to load on page load

Single Audio File Example:

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

Multiple Format Audio Example:

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

Audio with Embedded Source:

<audio src="podcast.mp3" controls muted></audio>

🎬 Video Element

The <video> tag embeds video content in web pages.

Common Video Attributes:

• controls — displays video controls (play, pause, volume, fullscreen)
• width and height — sets video dimensions in pixels
• loop — makes the video repeat continuously
• muted — starts the video muted
• autoplay — automatically starts playing
• poster — displays an image before the video plays

Single Video File Example:

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

Multiple Format Video Example:

<video controls width="800" height="450" poster="thumbnail.jpg">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  <source src="demo.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

Video with Embedded Source:

<video src="presentation.mp4" controls width="100%" height="400" loop muted></video>

🔄 Why Use Multiple Sources?

Browser compatibility varies for different media formats:

Best Practice Example:

<!-- Audio with fallback formats -->
<audio controls>
  <source src="audio.webm" type="audio/webm">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <p>Your browser doesn't support HTML5 audio. 
     <a href="audio.mp3">Download the audio file</a>.
  </p>
</audio>

<!-- Video with fallback formats -->
<video controls width="720" height="480" poster="video-poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <p>Your browser doesn't support HTML5 video. 
     <a href="video.mp4">Download the video file</a>.
  </p>
</video>