HTML Video
Embedding video content in web pages
🎥 What is HTML Video?
The HTML <video> element lets you embed video files directly into your web pages without needing external plugins. It's like having a mini movie theater on your website!
<!-- Basic video element -->
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Video Element Features
Controls
Built-in play, pause, and volume controls
<video controls></video>Autoplay & Loop
Automatic playback and repeat options
<video autoplay loop></video>Poster Image
Thumbnail shown before video plays
<video poster="thumb.jpg"></video>Responsive
Adapts to different screen sizes
<video style="width:100%"></video>🔹 Basic Video Element
Here's how to add a simple video to your webpage:
<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>Output:
Video player with standard controls
🔹 Video Attributes
Control video behavior with these attributes:
Essential Attributes:
- controls: Shows play/pause buttons and volume control
- autoplay: Starts playing automatically (use with muted!)
- muted: Starts with sound off
- loop: Repeats the video when it ends
- poster: Shows an image before the video plays
- preload: How much to load: "none", "metadata", or "auto"
<video
controls
autoplay
muted
loop
width="500"
height="300"
poster="video-thumbnail.jpg"
preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>🔹 Multiple Video Formats
Support different browsers by providing multiple formats:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<p>Your browser doesn't support HTML video.
<a href="movie.mp4">Download the video</a> instead.</p>
</video>Video Format Guide:
- MP4 (.mp4): Most widely supported, good quality
- WebM (.webm): Good compression, supported by modern browsers
- Ogg (.ogg): Open source format
Recommendation: Always include MP4 as your primary format!
🔹 Responsive Video
Make videos adapt to different screen sizes:
<!-- Responsive video -->
<video controls style="width: 100%; height: auto;">
<source src="responsive-video.mp4" type="video/mp4">
</video>
<!-- Video container for aspect ratio -->
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<video controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<source src="video.mp4" type="video/mp4">
</video>
</div>Output:
This video scales with the container
🔹 JavaScript Video Control
Control videos with custom buttons using JavaScript:
<video id="myVideo" width="400">
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">▶️ Play</button>
<button onclick="pauseVideo()">⏸️ Pause</button>
<button onclick="changeVolume(0.5)">🔉 50% Volume</button>
<script>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function changeVolume(volume) {
video.volume = volume; // 0.0 to 1.0
}
</script>