A Guide to HTML Audio and Video Elements

Category: HTML Fundamentals | Published on: by Dr. Talib

Embedding multimedia content used to require third-party plugins like Flash. Today, HTML provides the native <audio> and <video> elements, making it incredibly simple to add sound and video directly to your web pages.

This guide will cover the essential attributes and techniques for using these powerful tags.

The <audio> Element

The <audio> element is used to embed sound content in a document. It's as simple as providing a source file.

Basic Usage

<audio src="path/to/your/song.mp3">
  Your browser does not support the audio element.
</audio>

The text between the opening and closing tags is a fallback, displayed only in browsers that don't support the <audio> element.

Common Attributes for <audio>

  • src: The URL of the audio file.
  • controls: A boolean attribute that displays the browser's default audio controls (play/pause, volume, etc.). This is essential for user experience.
  • autoplay: A boolean attribute that makes the audio play automatically. Note: Most modern browsers block autoplay unless the audio is also muted.
  • muted: A boolean attribute that mutes the audio by default.
  • loop: A boolean attribute that makes the audio loop continuously.
  • preload: Hints to the browser how to load the file ('none', 'metadata', 'auto').

Example with Controls

<h4>Listen to our theme song:</h4>
<audio src="theme.mp3" controls></audio>

The <video> Element

The <video> element works very similarly to <audio> but includes additional attributes for visual display.

Common Attributes for <video>

It shares most attributes with <audio> (src, controls, autoplay, muted, loop), plus a few more:

  • width / height: Sets the dimensions of the video player. It's best practice to set these to avoid layout shifts as the video loads.
  • poster: The URL of an image to display before the video is played (like a thumbnail).
  • playsinline: A boolean attribute that allows the video to play within its element on mobile devices, rather than forcing fullscreen.
<video
  src="promo.mp4"
  width="640"
  height="360"
  controls
  poster="promo-thumbnail.jpg"
>
  Your browser does not support the video tag.
</video>

Note: While you can set `width` and `height` here, for responsive design it's often better to control the size with CSS, for example by setting `video { max-width: 100%; height: auto; }`.

Providing Multiple Sources for Compatibility

Not all browsers support the same media formats (e.g., .mp3, .ogg, .wav for audio; .mp4, .webm for video). To ensure your media works everywhere, you can provide multiple formats using the <source> element. The browser will use the first one it supports.

<video controls width="640" height="360" poster="fallback.jpg">
  <!-- Modern, efficient format -->
  <source src="video.webm" type="video/webm">
  
  <!-- Widely supported fallback -->
  <source src="video.mp4" type="video/mp4">
  
  Sorry, your browser doesn't support embedded videos.
</video>

Accessibility: Adding Captions with <track>

For accessibility, it's crucial to provide text alternatives for media. The <track> element allows you to add timed text tracks like subtitles, captions, or descriptions.

You'll need a WebVTT file (.vtt), which is a simple text file containing the timed cues.

Example .vtt File (captions.vtt)

WEBVTT

00:01.000 --> 00:04.000
This is the first caption.

00:05.000 --> 00:09.000
And this is the second one.

Implementing the <track> Element

<video controls src="my-video.mp4">
  <track
    src="captions_en.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default>
  <track
    src="subtitles_es.vtt"
    kind="subtitles"
    srclang="es"
    label="Español">
</video>

Conclusion

The native HTML <audio> and <video> elements make embedding media straightforward and accessible. By using their attributes correctly, providing fallbacks, and including text tracks, you can create rich media experiences for all users.

  • Use controls to give users control over playback.
  • Use <source> to provide multiple formats for maximum browser compatibility.
  • Use poster to show a thumbnail for videos.
  • Always add captions or subtitles with <track> for accessibility.

Use our Live HTML Viewer to experiment with different audio and video settings!