HTML <video> Tag – Playing Videos
📌 Introduction
The <video> tag is used to embed and play video files in a webpage.
It allows users to:
- Watch videos directly in the browser
- Control playback (play, pause, volume)
- Use multiple video formats
🧱 Basic Syntax
<video src="video.mp4" controls></video>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h1>My Video</h1>
<video src="movie.mp4" controls width="400"></video>
</body>
</html>
🖥️ Output Explanation
- The video appears in the browser
controlsadds play/pause buttons- Users can interact with the video
🎯 Important Attributes
1. controls
<video src="video.mp4" controls></video>
✔ Adds play, pause, volume, fullscreen buttons
2. width / height
<video src="video.mp4" controls width="500"></video>
✔ Controls video size
3. autoplay
<video src="video.mp4" autoplay></video>
⚠️ Starts video automatically (often muted by browsers)
4. muted
<video src="video.mp4" autoplay muted></video>
✔ Required for autoplay in many browsers
5. loop
<video src="video.mp4" controls loop></video>
✔ Repeats video automatically
💡 Better Practice: Multiple Formats
Different browsers support different formats:
<video controls width="400">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
✔ More compatible across browsers
🎯 When to Use <video>
Use it for:
- Tutorials
- Ads
- Product demos
- Background videos
- Educational content
⚠️ Important Notes
- Always include
controlsfor usability - Use optimized video sizes
- Avoid heavy videos without compression
🚫 Common Mistakes
- Missing
controls❌ - Using only one format ❌
- Large unoptimized videos ❌
- Forgetting fallback text ❌
🎨 Styling Example
<video controls width="300" style="border-radius:10px;">
<source src="video.mp4" type="video/mp4" />
</video>
🧪 Mini Exercise
Create a page with:
A video with controls
A second video that:
- Autoplays (muted)
- Loops
Add a fallback message