HTML <video> Tag

The HTML <video> tag is used to embed video content in a webpage. It supports multiple file formats and provides controls for play, pause, volume adjustment, and more. The <video> tag is a self-contained element that allows developers to include multimedia content in a user-friendly and accessible manner.

The <video> tag can include several attributes to control playback behavior, appearance, and accessibility.

Basic Syntax of HTML <video> Tag

The basic structure of the <video> tag is:

</>
Copy
<video controls>
    <source src="video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

The <source> element specifies the video file and format. The text inside the <video> tag is displayed if the browser does not support the video element.

Example of a Simple Video displayed using video tag

Here’s an example of embedding a video with basic playback controls:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Sample Video</h2>
        <video controls width="600">
            <source src="sample.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </body>
</html>
Example of a Simple Video displayed using video tag

Explanation: The video file “sample.mp4” is embedded and can be played directly in the browser. The controls attribute provides a user interface for playback control.

Attributes of HTML <video> Tag

  • controls: Adds playback controls like play, pause, and volume.
  • autoplay: Starts playing the video as soon as it is ready. Not recommended for user experience without muted.
  • loop: Makes the video restart automatically after it finishes playing.
  • muted: Plays the video with the audio muted.
  • poster: Specifies an image to be shown while the video is loading or until the user plays the video.
  • preload: Specifies whether the video should be loaded when the page loads. Values:
    • none: Do not preload.
    • metadata: Preload only metadata.
    • auto: Preload the whole video.
  • width/height: Specifies the dimensions of the video.

Example with Multiple Sources of Video

The <video> tag can include multiple <source> elements to provide different formats for better compatibility:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Multiple Formats</h2>
        <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 the video tag.
        </video>
    </body>
</html>
Example with Multiple Sources of Video

Explanation: The browser chooses the first format it supports. This ensures compatibility across different browsers.

Example with Poster and Autoplay

The <video> tag can display a poster image and play automatically when the page loads:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Poster and Autoplay</h2>
        <video controls autoplay muted poster="poster.jpg" width="600">
            <source src="sample.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Explanation: The poster attribute displays an image while the video is loading. The autoplay attribute starts playback automatically, and muted ensures no sound plays on load.

Styling the <video> Tag with CSS

CSS can be used to customize the appearance of the video:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            video {
                border: 3px solid #007BFF;
                border-radius: 10px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>
    <body>
        <h2>Styled Video</h2>
        <video controls width="600">
            <source src="sample.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

Result: The video player is styled with a border, rounded corners, and a shadow for a polished appearance.

Practical Applications of the <video> Tag

  • Tutorials and Guides: Embed educational videos for step-by-step instructions.
  • Marketing Content: Showcase product demonstrations, advertisements, or promotional videos.
  • Entertainment: Stream movies, music videos, or other entertainment content.
  • Interactive Websites: Integrate videos into interactive media, such as games or quizzes.