HTML Media

HTML5 introduced native support for audio and video playback without plugins.

1) Audio


<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: controls, autoplay, loop, muted.

2) Video


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

Attributes: controls, autoplay, loop, muted, poster (preview image).

3) Autoplay & Muted


<video autoplay muted loop width="320">
  <source src="movie.mp4" type="video/mp4">
</video>

4) Multiple Source Fallback


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

The browser will play the first format it supports.

Notes:

  • Use multiple <source> tags for cross-browser compatibility.
  • autoplay usually requires muted to work in modern browsers.
  • For streaming, you can use HLS (.m3u8) or DASH with JS players.
  • Always provide fallback text like “Your browser does not support…”.