HTML Audio and Video
HTML5 introduced native support for audio and video content directly in the browser — no plugins or Flash required. The <audio> and <video> elements make it simple to embed media files into any web page.
The <audio> Element
The <audio> tag is used to embed a sound file (music, podcast, voice recording, etc.) on a web page.
Basic 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>The text between the opening and closing tags (fallback text) is shown only if the browser does not support the <audio> element — this is rare in modern browsers.
Audio Attributes
| Attribute | Purpose |
|---|---|
controls | Shows play/pause, volume, and seek controls |
autoplay | Starts playing automatically when the page loads |
loop | Repeats the audio continuously |
muted | Starts the audio muted |
preload | Controls how the browser loads the audio file before play |
<!-- Audio with controls and loop -->
<audio controls loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<!-- Audio that plays automatically (muted is recommended with autoplay) -->
<audio autoplay muted>
<source src="intro-sound.mp3" type="audio/mpeg">
</audio>Audio File Formats
| Format | MIME Type | Notes |
|---|---|---|
| MP3 | audio/mpeg | Most widely supported format |
| OGG | audio/ogg | Open-source, good browser support |
| WAV | audio/wav | High quality, large file size |
| AAC | audio/aac | Good quality, used by Apple devices |
The <video> Element
The <video> tag is used to embed video content on a web page.
Basic Video
<video width="640" height="360" controls>
<source src="lesson.mp4" type="video/mp4">
<source src="lesson.webm" type="video/webm">
Your browser does not support the video element.
</video>Video Attributes
| Attribute | Purpose |
|---|---|
controls | Shows play/pause, volume, fullscreen controls |
width, height | Sets the display size of the video player |
autoplay | Starts video automatically on page load |
loop | Replays the video when it ends |
muted | Starts the video without sound |
poster | Shows a preview image before the video plays |
preload | Controls how data is loaded before playing |
<!-- Video with poster image and controls -->
<video width="720" height="405" controls poster="thumbnail.jpg">
<source src="course-intro.mp4" type="video/mp4">
</video>
<!-- Video that autoplays muted and loops (background video effect) -->
<video autoplay muted loop width="100%">
<source src="background-clip.mp4" type="video/mp4">
</video>Video File Formats
| Format | MIME Type | Notes |
|---|---|---|
| MP4 | video/mp4 | Most widely supported, recommended |
| WebM | video/webm | Open format, good compression |
| OGV | video/ogg | Open-source alternative |
Multiple Source Files for Compatibility
Different browsers support different file formats. By providing multiple <source> tags, the browser picks the first format it can play. This ensures the media works across all browsers.
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>Adding Subtitles with <track>
The <track> element adds subtitles or captions to a video. Subtitle files are typically in WebVTT format (.vtt).
<video controls width="640" height="360">
<source src="lecture.mp4" type="video/mp4">
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles-hi.vtt" kind="subtitles" srclang="hi" label="Hindi">
</video>Preload Attribute Values
| Value | Behavior |
|---|---|
auto | Browser loads the entire file when the page loads |
metadata | Loads only the duration and dimensions, not the full file |
none | Does not load any data until the user presses play |
Key Points to Remember
- Use
<audio>for sound and<video>for video — both are self-contained HTML5 elements - Always include the
controlsattribute to give users play/pause buttons - Provide multiple
<source>formats to ensure cross-browser compatibility - Use the
posterattribute to show a preview image before the video plays - Use
autoplay mutedtogether — most browsers block autoplay with sound - Use
<track>to add subtitles for better accessibility - MP4 is the most widely supported video format; MP3 is the most supported audio format