? Audio and Video in HTML

⚡ Quick Overview

HTML provides native media elements—<audio> and <video>—so you can play sound and video without plugins. You add one or more <source> elements to offer different formats, and you can attach a <track> for captions or subtitles. Browsers pick the first source they support and render a built-in player if you include the controls attribute.

? Key Concepts

? Audio basics

<audio controls> shows the browser’s audio player UI.
Use multiple <source> tags (e.g., MP3/OGG); the browser picks the first it supports.
Common attributes: preload (none | metadata | auto), loop, muted, autoplay.

? Video basics

<video controls> displays built-in controls for play/pause, timeline, etc.
Use width/height or CSS for sizing, and poster for a thumbnail.
For silent autoplay, use autoplay muted playsinline (especially on mobile).
Add captions with <track kind="subtitles" srclang="en" label="English" default>.

? Syntax & Theory

Basic structure of HTML audio and video elements with sources:

? View Audio Syntax

<!-- Audio with multiple sources -->
<audio controls preload="metadata">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

? View Video Syntax

<!-- Video with poster, sources and subtitles -->
<video controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support HTML video.
</video>

? Code Example — Audio Player

? View Audio Code Example

<!-- Audio with two sources and conservative preload -->
<audio controls preload="metadata">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

? Live Output — Audio

?️ Audio Player Preview

Two sources (MP3/OGG) with preload="metadata" for lighter loading.

? Code Example — Video Player with Captions

? View Video Code Example

<!-- Video with MP4/OGG sources, poster frame, and captions -->
<video controls width="480" poster="https://www.w3schools.com/html/pic_trulli.jpg">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  <track src="https://www.w3schools.com/tags/movie.vtt"
         kind="subtitles" srclang="en" label="English" default>
  Your browser does not support HTML video.
</video>

? Live Output — Video

▶️ Video Player Preview

Video with multiple formats and an English subtitles track.

?️ Interactive Example — JavaScript Controls

? View JS Control Code

// Basic programmatic control
const vid = document.getElementById('v1');
vid.play();           // start
vid.pause();          // pause
vid.currentTime += 5; // skip forward
vid.volume = 0.5;     // volume range: 0..1

// Toggle captions
const track = vid.textTracks[0];
track.mode = (track.mode === 'showing') ? 'disabled' : 'showing';

?️ Try the Controls

Use the buttons below to control the video player above with JavaScript.

? Volume

Note: External demo media URLs may be rate-limited or blocked by some networks—replace with your own files as needed.

? Tips & Best Practices

Formats: MP4/H.264 has wide support; add WebM/OGG for broader coverage and provide correct type attributes.
Autoplay: For background loops, combine autoplay with muted and playsinline to avoid blocks.
Preload wisely: Use preload="metadata" for lists; reserve auto for key media to save bandwidth.
Captions: Always include a <track kind="subtitles"> for speech-heavy videos to improve accessibility.
Poster image: Provide a meaningful poster so the user doesn’t see a blank rectangle before play.
Fallback text: Keep readable fallback text inside <audio>/<video> elements.
Controls: If you omit controls, be sure to implement a custom player UI with JavaScript.
Performance: Avoid heavy preload="auto" on many media items to prevent bandwidth drain.

? Try It Yourself

Create a muted hero video that uses autoplay muted playsinline loop and test it on mobile.
Write your own .vtt captions file and connect it with a <track> element.
Experiment with preload values (none, metadata, auto) and inspect network usage.
Style a custom play/pause button using JS and CSS, and hide the default controls with controls removed.
Add an audio playlist by wiring multiple buttons to change the src of a single <audio> element.

? Summary

<audio> and <video> provide native playback without plugins.
Use multiple <source> elements for different formats and add <track> for captions.
Attributes like controls, autoplay, muted, loop, and preload control behavior and performance.
JavaScript lets you build custom media controls via the media API (play(), pause(), currentTime, volume, etc.).
Thoughtful use of formats, captions, posters, and preload settings leads to accessible, performant media experiences.