-
Hajipur, Bihar, 844101
HTML
HTML5 Basics
-
HTML Introduction
-
HTML Editors
-
HTML Basic
-
HTML Elements
-
HTML Attributes
-
HTML Headings
-
HTML Paragraphs
-
HTML Styles
-
HTML Formatting
-
HTML Quotations
-
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
-
HTML Tables
-
HTML Lists
-
HTML Block & Inline
-
HTML Div
-
HTML Classes
-
HTML Id
-
HTML Head
-
HTML Layout
-
HTML Responsive
-
HTML Computercode
-
HTML Semantics
HTML Forms
-
HTML Forms
-
HTML Form Attributes
-
HTML Form Elements
-
HTML Input Types
-
HTML Input Attributes
-
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
HTML Video
🔹 What is the <video> Tag?
The <video> tag in HTML is used to embed video files in a webpage. It supports multiple video formats and allows users to play, pause, control volume, and more.
🔹 Basic Syntax
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
🔹 Key Attributes of <video>
| Attribute | Description |
|---|---|
src |
Specifies the video file path |
controls |
Displays play, pause, volume, etc. controls |
autoplay |
Automatically plays the video on load |
muted |
Starts video with no sound |
loop |
Repeats the video when it ends |
poster |
Sets a placeholder image before playing |
preload |
Hints if video should be loaded on page load |
🔹 Example with All Attributes
<video width="500" height="300" controls autoplay muted loop poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
🔹 Supported Video Formats
| Format | Type | Browser Support |
|---|---|---|
.mp4 |
video/mp4 |
✅ Widely supported |
.webm |
video/webm |
✅ Modern browsers |
.ogg |
video/ogg |
✅ Firefox, Opera |
🔹 Adding Multiple Sources (Fallback)
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
This improves compatibility across browsers.
🔹 Styling Videos with CSS
<style>
video {
border: 2px solid #333;
border-radius: 10px;
}
</style>Practice Questions
Q1. Embed a video file named intro.mp4 using the <video> tag.
Q2. Add controls to let users play and pause the video.
Q3. Make the video autoplay, muted, and loop.
Q4. Add a poster image called thumbnail.jpg.
Q5. Provide fallback text for browsers that don’t support video.
Q6. Embed a .webm and .mp4 version of the same video.
Q7. Set video dimensions to 640x360 pixels.
Q8. Use CSS to round the corners of the video player.
Q9. Create a responsive video using max-width: 100%.
Q10. Embed multiple videos on one page with different posters.
HTML
HTML5 Basics
-
HTML Introduction
-
HTML Editors
-
HTML Basic
-
HTML Elements
-
HTML Attributes
-
HTML Headings
-
HTML Paragraphs
-
HTML Styles
-
HTML Formatting
-
HTML Quotations
-
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
-
HTML Tables
-
HTML Lists
-
HTML Block & Inline
-
HTML Div
-
HTML Classes
-
HTML Id
-
HTML Head
-
HTML Layout
-
HTML Responsive
-
HTML Computercode
-
HTML Semantics
HTML Forms
-
HTML Forms
-
HTML Form Attributes
-
HTML Form Elements
-
HTML Input Types
-
HTML Input Attributes
-
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
