• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Video

← Previous Next →

🔹 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 Video Quiz

Q1: Which HTML tag is used to display videos on a webpage?

A. <media>
B. <movie>
C. <video>
D. <source>

Q2: What does the controls attribute do?

A. Hides the video
B. Adds control buttons like play and pause
C. Automatically plays the video
D. Adds captions

Q3: Which attribute lets a video start playing automatically?

A. start
B. auto
C. autoplay
D. loop

Q4: Which video format is most widely supported in browsers?

A. .ogg
B. .avi
C. .mp4
D. .mkv

Q5: Which attribute shows an image before the video plays?

A. cover
B. poster
C. alt
D. preview

Q6: What happens if the browser doesn't support the <video> tag?

A. Video downloads automatically
B. The browser crashes
C. Nothing is shown
D. The fallback text is displayed

Q7: What does the muted attribute do?

A. Prevents autoplay
B. Removes controls
C. Starts video with no sound
D. Stops loop

Q8: Which attribute makes the video repeat continuously?

A. repeat
B. again
C. loop
D. cycle

Q9: Which tag is used to specify the video file inside the <video> tag?

A. <video>
B. <source>
C. <embed>
D. <file>

Q10: Which CSS property makes the video responsive?

A. width: auto
B. max-width: 100%
C. resize: fit
D. display: fluid
← Previous Next →
Login
Go Back Top