Lesson 20: Audio and Video in HTML
Learn how to embed and control multimedia content in your web pages
Start LearningEmbedding Audio
The <audio> element allows you to embed audio content in your HTML documents.
Basic Audio Player
<audio controls> <source src="audio/sample.mp3" type="audio/mpeg"> <source src="audio/sample.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
Result:
Note: This is a sample audio player. The audio file is hosted externally for demonstration.
Audio Attributes
| Attribute | Description |
|---|---|
| controls | Displays audio controls (play, pause, volume, etc.) |
| autoplay | Audio starts playing as soon as it's ready |
| loop | Audio restarts automatically when finished |
| muted | Mutes the audio by default |
| preload | Specifies if and how audio should be loaded (auto, metadata, none) |
Embedding Video
The <video> element allows you to embed video content in your HTML documents.
Basic Video Player
<video controls width="640" height="360" poster="video/poster.jpg"> <source src="video/sample.mp4" type="video/mp4"> <source src="video/sample.webm" type="video/webm"> Your browser does not support the video tag. </video>
Result:
Note: This is a sample video player. The video file is hosted externally for demonstration.
Video Attributes
| Attribute | Description |
|---|---|
| controls | Displays video controls |
| autoplay | Video starts playing as soon as it's ready |
| loop | Video restarts automatically when finished |
| muted | Mutes the video by default |
| poster | Image shown while video is downloading or before playback |
| width | Sets the width of the video player |
| height | Sets the height of the video player |
Adding Subtitles and Captions
Use the <track> element to add subtitles, captions, or other timed text tracks to your videos.
<video controls width="640" height="360"> <source src="video/sample.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish"> <track src="captions.vtt" kind="captions" srclang="en" label="English Captions"> </video>
Result:
Note: Try selecting different subtitles from the video player's settings menu.
WebVTT File Format
WebVTT (Web Video Text Tracks) is a format for displaying timed text tracks.
WEBVTT 00:00:01.000 --> 00:00:04.000 Welcome to our HTML tutorial on audio and video 00:00:05.000 --> 00:00:09.000 Today we'll learn how to embed multimedia content 00:00:10.000 --> 00:00:15.000 We'll cover audio, video, and subtitles
Embedding YouTube Videos
You can embed YouTube videos using the iframe element with YouTube's embed URL.
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
Result:
Custom Media Player
Create a custom media player using HTML, CSS, and JavaScript.
<div class="media-player">
<video id="custom-video" class="media-element">
<source src="video/sample.mp4" type="video/mp4">
</video>
<div class="media-controls">
<button id="play-pause"><i class="fas fa-play"></i></button>
<div class="progress-container">
<div class="progress-fill"></div>
</div>
<div class="time-display">00:00 / 00:00</div>
<div class="volume-container">
<button id="mute"><i class="fas fa-volume-up"></i></button>
<input type="range" id="volume" class="volume-slider" min="0" max="1" step="0.1" value="1">
</div>
<button id="fullscreen"><i class="fas fa-expand"></i></button>
</div>
</div>
Result:
Practical Exercise: Create a Media Gallery
Create a media gallery using the audio and video elements covered in this lesson.