Bird
Raised Fist0
HTMLmarkup~5 mins

Video tag basics in HTML

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The <video> tag lets you show videos right on a webpage without extra tools.

You want to add a tutorial video to your website.
You need to show a product demo video on a page.
You want visitors to watch a short clip without leaving your site.
You want to add background videos to make your site lively.
You want to provide video content that works on all devices.
Syntax
HTML
<video src="video.mp4" controls></video>

The src attribute points to the video file.

The controls attribute adds play, pause, and volume buttons automatically.

Examples
Basic video with controls so users can play or pause.
HTML
<video src="movie.mp4" controls></video>
Video that plays automatically, without sound, and repeats forever.
HTML
<video src="clip.webm" autoplay muted loop></video>
Multiple sources for better browser support and fallback text if video is not supported.
HTML
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
Sample Program

This page shows a video with controls. It uses two video formats for better browser support. The video resizes nicely on different screen sizes.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Tag Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f0f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    video {
      max-width: 100%;
      height: auto;
      border: 2px solid #333;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Watch this sample video</h1>
  <video controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser does not support the video tag.
  </video>
</body>
</html>
OutputSuccess
Important Notes

Always include multiple <source> tags with different video formats for best browser support.

Use the controls attribute to give users easy control over the video.

Make sure your video files are optimized for web to load quickly.

Summary

The <video> tag lets you embed videos directly on your webpage.

Use controls to add play and pause buttons automatically.

Provide multiple video formats inside <source> tags for better compatibility.

Practice

(1/5)
1. What is the main purpose of the <video> tag in HTML?
easy
A. To embed videos directly on a webpage
B. To create audio playlists
C. To add images to a webpage
D. To style text content

Solution

  1. Step 1: Understand the role of the <video> tag

    The <video> tag is designed to embed video content directly into HTML pages.

  2. Step 2: Compare with other options

    Options A, B, and C relate to audio, images, and text styling, which are not the purpose of <video>.

  3. Final Answer:

    To embed videos directly on a webpage -> Option A

  4. Quick Check:

    <video> tag = embed videos [OK]
Hint: Remember: <video> is for videos, not audio or images [OK]
Common Mistakes:
  • Confusing <video> with <audio> tag
  • Thinking <video> adds images
  • Assuming <video> styles text
2. Which of the following is the correct way to add playback controls to a video using the <video> tag?
easy
A. <video src="movie.mp4" play></video>
B. <video src="movie.mp4" playcontrols></video>
C. <video src="movie.mp4" control></video>
D. <video src="movie.mp4" controls></video>

Solution

  1. Step 1: Identify the correct attribute for controls

    The correct attribute to add playback controls is controls without any extra letters.

  2. Step 2: Check each option's attribute spelling

    <video src="movie.mp4" controls></video> uses controls correctly; others have incorrect or non-existent attributes.

  3. Final Answer:

    <video src="movie.mp4" controls></video> -> Option D

  4. Quick Check:

    Use controls attribute to add buttons [OK]
Hint: Use exactly 'controls' attribute to show video buttons [OK]
Common Mistakes:
  • Misspelling 'controls' as 'control' or 'playcontrols'
  • Using non-existent attributes like 'play'
  • Forgetting to close the video tag properly
3. What will the following HTML code do when opened in a modern browser?
<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
medium
A. Show error message and no video
B. Play video.mp4 only, ignoring video.webm
C. Play video.webm if supported, else video.mp4
D. Play both videos simultaneously

Solution

  1. Step 1: Understand multiple <source> tags in <video>

    The browser tries each <source> in order and plays the first supported format.

  2. Step 2: Analyze the source order and browser support

    If the browser supports WebM, it plays video.webm; otherwise, it falls back to video.mp4.

  3. Final Answer:

    Play video.webm if supported, else video.mp4 -> Option C

  4. Quick Check:

    Multiple sources = fallback to supported video [OK]
Hint: Browser picks first supported source in order [OK]
Common Mistakes:
  • Assuming both videos play at once
  • Thinking only the last source is used
  • Ignoring fallback text for unsupported browsers
4. Identify the error in this video tag code:
<video src="movie.mp4" controls>
  <source src="movie.webm" type="video/webm">
</video>
medium
A. The controls attribute is misspelled
B. The src attribute should not be used with <source> tags inside <video>
C. The <source> tag is missing a closing slash
D. The <video> tag cannot have multiple sources

Solution

  1. Step 1: Understand usage of src and <source> tags

    When using multiple <source> tags, the src attribute on <video> should be omitted to avoid conflicts.

  2. Step 2: Check other options for errors

    controls is spelled correctly, <source> tags do not require closing slashes in HTML5, and multiple sources are allowed.

  3. Final Answer:

    The src attribute should not be used with <source> tags inside <video> -> Option B

  4. Quick Check:

    Use either src or <source>, not both [OK]
Hint: Don't mix video src attribute with source tags [OK]
Common Mistakes:
  • Using src on video with source tags
  • Thinking <source> needs closing slash
  • Believing controls attribute is misspelled
5. You want to embed a video that automatically plays, loops, and is muted by default for better user experience. Which of the following is the correct <video> tag to achieve this?
hard
A. <video src="clip.mp4" autoplay loop muted></video>
B. <video src="clip.mp4" autoplay muted></video>
C. <video src="clip.mp4" autoplay loop controls></video>
D. <video src="clip.mp4" loop controls></video>

Solution

  1. Step 1: Identify required attributes for autoplay, loop, and mute

    The attributes autoplay, loop, and muted enable automatic play, repeating, and silent start respectively.

  2. Step 2: Check which option includes all three without extra controls

    <video src="clip.mp4" autoplay loop muted></video> has all three attributes and no controls, matching the requirement exactly.

  3. Final Answer:

    <video src="clip.mp4" autoplay loop muted></video> -> Option A

  4. Quick Check:

    Use autoplay, loop, muted together for silent looping video [OK]
Hint: Combine autoplay, loop, muted attributes for silent looping video [OK]
Common Mistakes:
  • Forgetting muted causes autoplay to block
  • Adding controls when not needed
  • Missing one of the required attributes
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard