HTML Video – Solved Practice Questions

By /

Introduction

The HTML <video> element is used to add video content directly to a webpage. It supports controls, multiple video formats, autoplay, muted playback, looping, posters, and fallback content. The following solved questions focus on practical use of HTML video.

Question 1

Problem Statement

Create a basic HTML video player using an MP4 video file.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Video</title>
</head>
<body>

    <h1>My Video</h1>

    <video src="video.mp4" controls width="600">
        Your browser does not support HTML video.
    </video>

</body>
</html>

Output

My Video

[ ▶  ───────────────────── 🔊 ]

Step-by-Step Explanation

  • <video> creates a video player.
  • src="video.mp4" specifies the video file.
  • controls displays play, pause, volume, and other controls.
  • width="600" sets the displayed width.

Question 2

Problem Statement

Create a video player using a separate <source> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Source</title>
</head>
<body>

    <h1>Learning Video</h1>

    <video controls width="600">

        <source src="lesson.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Learning Video

[ ▶  ───────────────────── 🔊 ]

Step-by-Step Explanation

  • <video> creates the video area.
  • <source> specifies the video file.
  • type="video/mp4" tells the browser that the file is an MP4 video.
  • Using <source> makes it easier to provide alternative video formats.

Concepts Used: <video>, <source>, type

Question 3

Problem Statement

Create a video player that provides MP4, WebM, and OGG video formats.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Video Formats</title>
</head>
<body>

    <h1>Video Player</h1>

    <video controls width="600">

        <source src="video.mp4" type="video/mp4">

        <source src="video.webm" type="video/webm">

        <source src="video.ogv" type="video/ogg">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Video Player

[ ▶  ───────────────────── 🔊 ]

Step-by-Step Explanation

  • Multiple <source> elements provide different video formats.
  • The browser uses the first source it can play.
  • video/mp4 represents MP4.
  • video/webm represents WebM.
  • video/ogg represents OGG video.

Question 4

Problem Statement

Create a video that automatically starts playing when the page loads.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Autoplay Video</title>
</head>
<body>

    <h1>Welcome Video</h1>

    <video
        controls
        autoplay
        muted
        width="600">

        <source src="welcome.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Welcome Video

[ ▶  ───────────────────── 🔇 ]

Step-by-Step Explanation

  • autoplay asks the browser to start the video automatically.
  • muted starts the video without sound.
  • Muted autoplay is more likely to be permitted by modern browsers.
  • controls allows the user to control the video.

Question 5

Problem Statement

Create a video that automatically repeats after it finishes.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Loop Video</title>
</head>
<body>

    <h1>Looping Video</h1>

    <video
        controls
        loop
        width="600">

        <source src="animation.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Looping Video

[ ▶  ───────────────────── 🔊 ]

Step-by-Step Explanation

  • loop makes the video start again after it finishes.
  • controls provides playback controls.
  • This can be useful for short demonstrations or animations.

Question 6

Problem Statement

Create a video player with a poster image that is displayed before the video starts.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Poster</title>
</head>
<body>

    <h1>Course Introduction</h1>

    <video
        controls
        width="600"
        poster="thumbnail.jpg">

        <source src="course.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Course Introduction

[Thumbnail Image]

▶ Play Video

Step-by-Step Explanation

  • poster displays an image before the video starts.
  • The image disappears when playback begins.
  • It provides a preview of the video content.
  • controls lets users play and pause the video.

Question 7

Problem Statement

Create a video player with custom width and height.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Size</title>
</head>
<body>

    <h1>Learning HTML</h1>

    <video
        controls
        width="700"
        height="400">

        <source src="lesson.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

Learning HTML

[Large Video Player]

Step-by-Step Explanation

  • width sets the video’s width.
  • height sets the video’s height.
  • The browser scales the video to fit the specified dimensions.
  • Choose dimensions that match the video’s aspect ratio for the best display.

Question 8

Problem Statement

Create a video player that preloads only the video’s metadata.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Preload</title>
</head>
<body>

    <h1>HTML Tutorial</h1>

    <video
        controls
        preload="metadata"
        width="600">

        <source src="tutorial.mp4" type="video/mp4">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

HTML Tutorial

[ ▶ ───────────────────── 🔊 ]

Step-by-Step Explanation

  • preload="metadata" allows the browser to load basic information about the video.
  • Metadata may include the video’s duration and dimensions.
  • It does not request that the complete video be downloaded immediately.
  • This can help reduce unnecessary data usage.

Question 9

Problem Statement

Create a video player with fallback text for unsupported browsers.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Fallback</title>
</head>
<body>

    <h1>Watch the Video</h1>

    <video controls width="600">

        <source src="movie.mp4" type="video/mp4">

        Your browser does not support HTML video.
        Please use a modern web browser.

    </video>

</body>
</html>

Output

Supported browser:

Watch the Video

[ ▶ ───────────────────── 🔊 ]

Unsupported browser:

Your browser does not support HTML video.
Please use a modern web browser.

Step-by-Step Explanation

  • <source> provides the video file.
  • Text inside <video> acts as fallback content.
  • The fallback message is shown when the browser cannot play the video.
  • This informs users why the video is unavailable.

Question 10

Problem Statement

Create a complete HTML video player using controls, poster image, looping, preload, and multiple video formats.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete HTML Video Player</title>
</head>
<body>

    <h1>HTML Video Tutorial</h1>

    <p>Watch the complete HTML lesson below.</p>

    <video
        controls
        width="700"
        poster="thumbnail.jpg"
        preload="metadata"
        loop>

        <source src="tutorial.mp4" type="video/mp4">

        <source src="tutorial.webm" type="video/webm">

        <source src="tutorial.ogv" type="video/ogg">

        Your browser does not support HTML video.

    </video>

</body>
</html>

Output

HTML Video Tutorial

Watch the complete HTML lesson below.

[Thumbnail Image]

▶ Play Video

Step-by-Step Explanation

  • <video> creates the video player.
  • controls displays playback controls.
  • poster shows a preview image before playback.
  • loop repeats the video after it finishes.
  • preload="metadata" loads basic video information.
  • Multiple <source> elements provide different video formats.
  • The fallback text appears if the browser cannot play the video.

Key Takeaways

  • <video> is used to embed videos in HTML.
  • controls displays play, pause, volume, and fullscreen controls.
  • <source> allows multiple video formats.
  • autoplay requests automatic playback.
  • muted starts the video without sound.
  • loop repeats the video automatically.
  • poster displays a preview image before playback.
  • preload controls how much video information the browser loads.
  • width and height define the video size.
  • Fallback text helps users with unsupported browsers.

Frequently Asked Questions (FAQs)

1. What is the HTML <video> element?

The <video> element is used to display and play videos on a webpage.

2. Which video format is most commonly used?

MP4 is the most commonly used format because it has broad browser support.

3. What does the controls attribute do?

It displays built-in video controls such as play, pause, volume, and fullscreen.

4. What is the purpose of the poster attribute?

It displays an image before the video starts playing.

5. Why is muted often used with autoplay?

Modern browsers are generally more likely to allow autoplay when the video starts muted.

6. What does the loop attribute do?

It makes the video play again automatically after it finishes.

7. What does preload="metadata" do?

It allows the browser to load basic information such as the video’s duration and dimensions before playback.

8. Why use multiple <source> elements?

They provide different video formats so the browser can choose one it supports.

9. What happens if a browser does not support HTML video?

The fallback text inside the <video> element can be displayed.

10. Can HTML videos play without JavaScript?

Yes. Basic video playback works using only the <video> element and HTML attributes.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top