HTML Video Tag: Syntax, Usage, and Examples

The HTML video tag allows you to embed and play videos directly on a webpage. It provides built-in controls for play, pause, volume, and full-screen mode. The video tag in HTML supports multiple formats like MP4, WebM, and Ogg, ensuring compatibility across different browsers.

How to Use the HTML Video Tag

To insert a video in an HTML document, use the <video> element along with a <source> tag to define the video file format.

Basic Syntax

<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>

• The controls attribute displays the default video player controls.
• The <source> elements allow the browser to select the best-supported video format.
• The fallback text appears if the browser does not support the HTML video tag.

When to Use the HTML Video Tag

The video HTML tag is useful when embedding video content on webpages. Here are some common use cases:

1. Tutorials and Learning Materials

Websites offering educational content can use the video tag in HTML to display instructional videos.

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

2. Product Demonstrations

E-commerce sites often use the HTML embed video tag to showcase product functionality.

<video controls>
    <source src="product-demo.mp4" type="video/mp4">
</video>

3. Background Videos

Some websites use autoplaying background videos for a modern design effect.

<video autoplay loop muted>
    <source src="background.mp4" type="video/mp4">
</video>

• The autoplay attribute starts the video automatically.
• The loop attribute repeats the video.
• The muted attribute mutes the audio, which is required for autoplay to work in some browsers.

Examples of the HTML Video Tag

Example 1: How to Use Video Tag in HTML with Custom Controls

You can hide the default controls and create your own buttons using JavaScript.

<video id="myVideo">
    <source src="sample.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>
<button onclick="document.getElementById('myVideo').volume += 0.1">Increase Volume</button>
<button onclick="document.getElementById('myVideo').volume -= 0.1">Decrease Volume</button>

Example 2: HTML Video Tag with Poster Image and Controls

The poster attribute displays an image before the video starts playing.

<video controls poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
</video>

Example 3: HTML Video Tag Autoplay with JavaScript Events

You can trigger actions when a video starts or ends.

<video id="eventVideo" autoplay>
    <source src="promo.mp4" type="video/mp4">
</video>

<script>
    document.getElementById("eventVideo").onended = function() {
        alert("The video has finished playing.");
    };
</script>

Learn More About the HTML Video Tag

1. HTML Video Tag Attributes

The HTML video tag attributes allow customization of the video experience:

• controls – Displays playback controls.
• autoplay – Plays the video automatically.
• loop – Repeats the video when it ends.
• muted – Mutes the video by default.
• poster – Displays an image before the video plays.
• preload – Defines how the browser loads the video (auto, metadata, none).

<video controls autoplay loop muted poster="cover.jpg">
    <source src="clip.mp4" type="video/mp4">
</video

2. HTML Video Source Tag for Multiple Formats

For better browser compatibility, use multiple <source> tags.

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

3. HTML Video Link Tag to Open a Video in a New Tab

Sometimes, users may want to open the video in a separate tab.

<a href="video.mp4" target="_blank">Watch Video</a>

4. HTML Video Player Tag with Embedded Subtitles

You can add subtitles using the <track> tag.

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

5. HTML Tag to Insert Video with Custom CSS Styling

You can customize the video player appearance using CSS.

<video id="styledVideo" controls>
    <source src="styled.mp4" type="video/mp4">
</video>

<style>
    video {
        width: 100%;
        border-radius: 10px;
        background-color: #f5f5f5;
    }
</style>

The HTML video tag is a powerful tool for adding multimedia content to websites, whether for educational, promotional, or entertainment purposes.