Lesson 11 — Media

Embedding Audio and Video

HTML5 added native audio and video elements, removing the need for third-party plugins to play media directly in the browser.

The video Element

The <video> element plays video files directly, with the controls attribute adding play/pause/volume controls. Providing multiple <source> formats increases browser compatibility.

HTML — Video and audio 
<video controls width="640" poster="thumbnail.jpg">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

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

Common Mistakes

  • Providing only one video format, which may fail to play in browsers that don't support that codec.
  • Forgetting the controls attribute, leaving visitors with no way to play, pause, or adjust volume.
  • Using autoplay with sound, which is blocked by most modern browsers and frustrates users when it does work.
  • Not providing fallback text inside the tag for very old browsers that don't support HTML5 media.

Professional Tip

Always set a poster image on video elements. It shows a meaningful preview frame before the visitor presses play, rather than a blank black box or the first (often unhelpful) video frame.

Your Turn

Embed a video file with controls, a poster image, and two source formats, plus an audio player below it for a second file.

Mini Quiz

What does the controls attribute do on a video element?