← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 5 of 20

HTML Audio/Video Reference

Imagine visiting an online video editor, but instead of seeing play, pause, or volume controls, the media player is just a blank, unclickable grey box. You would have to download the file and open a separate program just to watch a five-second clip. Modern HTML5 solves this issue. It provides native, built-in audio and video reference elements, allowing you to embed media files directly onto your page. This reference guide lists all the standard attributes (like autoplay, controls, loop, and muted) so you can build responsive, high-performance media players.

In this page:

  1. Standard Audio & Video Elements
  2. Playback Control Attributes
  3. Optimizing with preload
  4. Adding Subtitles with track
  5. Media Source Fallback Configurations

Standard Audio & Video Elements

HTML5 introduced native audio and video elements to replace insecure, third-party plug-ins, allowing you to embed media files directly onto your webpage.

Note: Offer both MP4 and WebM formats to ensure your videos play on all devices.

Warning: Always write fallback text inside your media tags to assist users on legacy devices that cannot render the player.

Example: Standard Audio & Video Elements

markup 
<video src="movie.mp4" controls></video>
<audio src="song.mp3" controls></audio>

Playback Control Attributes

You can customize how your media players behave by using built-in attributes: controls displays playback buttons, autoplay starts playback automatically, loop repeats the file, and muted silences the audio.

Note: Always include the controls attribute so your users can pause and play the media.

Warning: Browsers will block auto-playing media files unless you also include the muted attribute.

Example: Playback Control Attributes

markup 
<video src="movie.mp4" controls autoplay loop muted></video>

Optimizing with preload

The preload attribute tells the browser how much of the media file to download in the background when the page loads, allowing you to choose between none, metadata, or auto settings.

Note: Use preload="none" on pages with multiple media players to keep your site loading quickly.

Warning: Overusing preload="auto" can waste substantial server bandwidth and slow down page loads for mobile users.

Example: Optimizing with preload

markup 
<audio src="song.mp3" controls preload="metadata"></audio>

Adding Subtitles with track

The track element is used to add timed text subtitles or captions to your videos, referencing a standard WebVTT (.vtt) file to display synchronised text on top of your video.

Note: Set the default attribute on your track tag to display subtitles automatically.

Warning: Ensure your WebVTT caption file is hosted securely and is free of syntax errors to guarantee accurate caption synchronization.

Example: Adding Subtitles with track

markup 
<video src="movie.mp4" controls>
  <track src="captions.vtt" kind="subtitles" srclang="en" default>
</video>

Media Source Fallback Configurations

To ensure your media plays on all devices, you can provide multiple source elements inside your media tags, allowing the browser to select and play the first compatible format it finds.

Note: Offer both MP4 and WebM formats for videos, and MP3 and OGG formats for audio files.

Warning: Using large, unoptimized raw file formats (like AVI or WAV) can waste bandwidth and slow down your site's load speed.

Example: Media Source Fallback Configurations

markup 
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>
Common Mistakes
  1. Forgetting to include the controls attribute, leaving users unable to interact with your media players.
  2. Attempting to auto-play media files with sound enabled, which modern browsers will block.
  3. Using large, uncompressed raw file formats (like AVI or WAV) that are not widely supported by modern browsers.
Chapter Summary
  • Modern HTML5 native media elements (audio and video) have replaced old third-party plugins.
  • Customize how your media players behave by using attributes: controls, autoplay, loop, and muted.
  • Use the preload attribute to optimize background loading speeds, and track tags to add timed text subtitles for web accessibility.
Browser Support

Standard HTML5 audio and video elements are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Doctypes Next Lesson → HTML Meta Tags

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.