Description

The HTML element <video> is used to embed a video into an HTML document.

The video formats supported by most browsers are MP4, OGG, and WebM.

  • The MP4 video file will have a .mp4 file extension.
  • The OGG video file will have a .ogg file extension.
  • The WebM video file will have a .webm file extension.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain the elements <source> and <track>, and text.
Tags Both the opening and closing tags are required.
Versions HTML 5

Syntax

Here is the basic syntax of the <video> element.

<video>...</video>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element video</title>
</head>
<body>
    <h2>HTML Video</h2>
    <video width="400" height="300" controls src="/assets/videos/movie.mp4">
        Oops!! Your browser does not support video element.
        You can download the video from <a href="https://www.randomcodez.com/downloads">here</a>.
    </video>
    <h2>HTML Video with alternate video formats</h2>
    <video width="400" height="300" controls>
        <source src="/assets/videos/movie.mp4" type="video/mp4">
        <source src="/assets/videos/movie.webm" type="video/webm">
        <source src="/assets/videos/movie.ogg" type="video/ogg">
        Oops!! Your browser does not support video element.
    </video>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <video> element.

Attribute Type Details
Element-Specific Attributes The tag <video> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <video> supports the HTML Global Attributes.
Event Attributes The tag <video> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <video> element.

Attribute Value Required Description
autoplay autoplay No Boolean attribute that specifies whether to automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls No Specifies that the browsers should display video controls to allow the user to control video playback, such as play/pause, volume, etc.
height pixels No Defines the height of the video display area.
loop loop No Boolean attribute that specifies that the video will automatically start over again, upon reaching the end.
muted muted No Boolean attribute that specifies that the video will be initially silenced, where the default value is false for unmute.
poster URL No Specifies an image to be shown while the video is downloading, or until the user hits the play button.
If this attribute isn't specified, nothing is displayed until the first frame of the video is available; then the first frame is displayed as the poster.
preload auto, metadata, none No Provides a hint to the browser about whether to download the video itself or its metadata.
The autoplay attribute can override this attribute because if you want to automatically play a video, the browser will obviously need to download it.
src URL No Specifies the location of the video file to embed. Alternatively, you can use the preferred <source> tag as it allows for multiple media formats.
width pixels No Defines the width of the video display area.

Browser Compatibility

The tag <video> is supported in all modern browsers.

  • Google Chrome 4+
  • Internet Explorer or Edge 9+
  • Firefox 3.5+
  • Apple Safari 4+
  • Opera 10.5+

Related Links