9
HTML5 introduced the <audio> and <video> elements, allowing developers to embed multimedia directly into web pages without requiring external plugins like Flash.
These elements provide built-in controls, flexible APIs, and support for multiple file formats.
In this tutorial, you’ll learn how to:
- Use the <audio> and <video> elements.
- Add controls and attributes.
- Work with multiple file formats.
- Use JavaScript to control media playback.
- Customize media players with CSS and JavaScript.
1. The <audio> Element
The <audio> element embeds audio content into a webpage.
Example 1: Basic Audio Player
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Audio Player</title>
</head>
<body>
<h1>Basic Audio Example</h1>
<audio controls>
<source src="example-audio.mp3" type="audio/mpeg">
<source src="example-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Explanation:
- <audio>: Embeds audio content.
- controls: Displays playback controls (play, pause, volume).
- <source>: Specifies the audio file and its format.
2. The <video> Element
The <video> element embeds video content into a webpage.
Example 2: Basic Video Player
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Video Player</title>
</head>
<body>
<h1>Basic Video Example</h1>
<video controls width="640" height="360">
<source src="example-video.mp4" type="video/mp4">
<source src="example-video.webm" type="video/webm">
Your browser does not support the video element.
</video>
</body>
</html>
Explanation:
- <video>: Embeds video content.
- controls: Adds playback controls.
- width and height: Set the dimensions of the video.
3. Attributes for Audio and Video
You can customize audio and video elements using attributes.
Common Attributes:
| Attribute | Description |
|---|---|
| controls | Adds default playback controls. |
| autoplay | Automatically starts playback. |
| loop | Loops the media playback. |
| muted | Starts playback with the volume muted. |
| preload | Controls how/when the file is loaded (auto, metadata, none). |
Example 3: Media with Autoplay, Loop, and Muted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Attributes</title>
</head>
<body>
<h1>Audio and Video with Attributes</h1>
<!-- Autoplay and Loop Audio -->
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br><br>
<!-- Muted Video with Loop -->
<video autoplay loop muted width="640" height="360">
<source src="looping-video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
4. Working with Multiple Formats
Different browsers support different formats. Use multiple <source> elements to ensure compatibility.
Common Formats:
| Media Type | Formats Supported |
|---|---|
| Audio | MP3 (audio/mpeg), OGG (audio/ogg), WAV (audio/wav) |
| Video | MP4 (video/mp4), WebM (video/webm), OGG (video/ogg) |
5. Using JavaScript to Control Media
The Audio and Video elements expose methods and properties for programmatic control.
Example 4: JavaScript Control for Audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Audio Control</title>
</head>
<body>
<h1>Audio Control Example</h1>
<audio id="myAudio" src="example-audio.mp3"></audio>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>
<script>
const audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function stopAudio() {
audio.pause();
audio.currentTime = 0; // Reset to the start
}
</script>
</body>
</html>
Explanation:
- play(): Starts playback.
- pause(): Pauses playback.
- currentTime: Sets the playback position.
Example 5: JavaScript Control for Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Video Control</title>
</head>
<body>
<h1>Video Control Example</h1>
<video id="myVideo" width="640" height="360" controls>
<source src="example-video.mp4" type="video/mp4">
</video>
<br>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="setVolume(0.5)">Set Volume to 50%</button>
<script>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function setVolume(value) {
video.volume = value; // Value ranges from 0.0 to 1.0
}
</script>
</body>
</html>
Explanation:
- volume: Adjusts the audio volume (0.0 to 1.0).
6. Customizing Media Players
You can hide the default controls and create your own media player using CSS and JavaScript.
Example 6: Custom Media Player
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Media Player</title>
<style>
.custom-controls {
margin-top: 10px;
}
.custom-controls button {
margin: 0 5px;
}
</style>
</head>
<body>
<h1>Custom Media Player</h1>
<video id="customVideo" width="640" height="360" src="example-video.mp4"></video>
<div class="custom-controls">
<button onclick="playCustom()">Play</button>
<button onclick="pauseCustom()">Pause</button>
<button onclick="restartCustom()">Restart</button>
</div>
<script>
const customVideo = document.getElementById("customVideo");
function playCustom() {
customVideo.play();
}
function pauseCustom() {
customVideo.pause();
}
function restartCustom() {
customVideo.currentTime = 0;
customVideo.play();
}
</script>
</body>
</html>
7. Streaming Media
For live or on-demand streaming, use services like HLS (HTTP Live Streaming) or DASH (Dynamic Adaptive Streaming over HTTP). These require additional libraries or server setups.
8. Accessibility Tips
- Provide captions using <track>:
<video controls> <source src="example-video.mp4" type="video/mp4"> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> </video> - Always include fallback text inside <audio> or <video> for unsupported browsers.
Conclusion
In this tutorial, you learned:
- How to use the <audio> and <video> elements.
- Common attributes like controls, autoplay, and loop.
- How to programmatically control media with JavaScript.
- How to customize a media player using CSS and JavaScript.
HTML5’s <audio> and <video> elements simplify embedding multimedia content, providing a rich user experience for modern web applications.