HTML Media

🎧 Introduction to HTML Media Elements

HTML supports embedding media like audio 🎵, video 🎬, and images 🖼️ directly into your webpages. Media tags in HTML5 make it easy to create rich, interactive web experiences without requiring plugins.

>>“A web without media is like a song without sound.” 🎶

📺 Key Media Elements in HTML

  • <audio> – Embeds sound/audio files
  • <video> – Embeds video content
  • <source> – Specifies multiple media file sources
  • <track> – Adds subtitles/captions to videos

🎼 The <audio> Element

Use the <audio> tag to play audio files (like MP3, WAV). Controls allow the user to play/pause the sound.

Audio Tag Example

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

Note

💡 Always include fallback text inside the tag for unsupported browsers.

📹 The <video> Element

HTML5 introduced the <video> tag to play video files like MP4 or WebM. You can control playback using the controls attribute.

Video Tag Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
Adding Captions with <track>

Video with Subtitles

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />
</video>

Note

⚠️ Make sure your .vtt subtitle file is properly formatted.

🌐 Using Multiple <source> Elements

The <source> tag lets browsers pick the first supported media file from a list. This enhances cross-browser compatibility.

Video with Multiple Sources

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

📁 Supported File Types

MediaFormats
AudioMP3, WAV, OGG
VideoMP4, WebM, OGG
SubtitlesVTT

🧠 Tips for Media Integration

  • Use preload to specify media loading behavior (e.g., none, auto, metadata)
  • Use autoplay and loop attributes carefully – they can affect user experience
  • Use muted on autoplay videos to comply with browser policies
  • Always include alternative text or fallback content

🔗 Resources

>>“Great websites don’t just inform — they play, speak, and show.” 🔊