HTML Audio/Video
Embed and control multimedia content in web pages
🎵 HTML Multimedia
HTML5 provides native support for audio and video content without requiring plugins. You can easily embed and control multimedia files using the <audio> and <video> elements.
<!-- Basic audio element -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<!-- Basic video element -->
<video controls width="320">
<source src="movie.mp4" type="video/mp4">
</video>
HTML Audio Element
Basic Audio
Simple audio playback
<audio controls>
<source src="song.mp3">
</audio>Autoplay
Start playing automatically
<audio autoplay>
<source src="bg-music.mp3">
</audio>Loop
Repeat audio continuously
<audio loop controls>
<source src="ambient.mp3">
</audio>Muted
Start with audio muted
<audio muted controls>
<source src="sound.mp3">
</audio>🔹 Audio Examples
Different ways to use the audio element:
<!-- Audio with controls -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Audio with multiple attributes -->
<audio controls loop preload="auto">
<source src="background.mp3" type="audio/mpeg">
</audio>
<!-- Audio with custom styling -->
<audio controls style="width: 100%;">
<source src="podcast.mp3" type="audio/mpeg">
</audio>Output:
🔹 HTML Video Element
Embed video content with various options:
<!-- Basic video -->
<video controls width="400" height="300">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<!-- Video with poster image -->
<video controls width="400" poster="thumbnail.jpg">
<source src="presentation.mp4" type="video/mp4">
</video>
<!-- Autoplay video (muted for browser compatibility) -->
<video autoplay muted loop width="400">
<source src="background-video.mp4" type="video/mp4">
</video>Output:
400x300 with controls
Shows thumbnail before play
Muted and looping
🔹 Media Attributes
Common attributes for audio and video elements:
Control Attributes:
- controls: Shows play/pause/volume controls
- autoplay: Starts playing automatically
- loop: Repeats the media when it ends
- muted: Starts with audio muted
- preload: How much to load before playing (none/metadata/auto)
Video-Specific Attributes:
- width/height: Video dimensions
- poster: Image shown before video plays
<!-- All attributes example -->
<video
controls
autoplay
muted
loop
preload="auto"
width="500"
height="300"
poster="video-thumbnail.jpg">
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
Your browser doesn't support video.
</video>🔹 Supported File Formats
Different browsers support different media formats:
Audio Formats
- MP3: Most widely supported
- OGG: Open source format
- WAV: Uncompressed audio
- AAC: High quality compression
Video Formats
- MP4: Most compatible
- WebM: Google's format
- OGV: Open source video
- AVI: Older format
🔹 JavaScript Media Control
Control media playback with JavaScript:
<video id="myVideo" width="400">
<source src="sample.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="changeVolume()">Volume 50%</button>
<script>
const video = document.getElementById('myVideo');
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function changeVolume() {
video.volume = 0.5; // 50% volume
}
</script>