HTML video tag explained

The HTML <video> tag is included in HTML5 release to provide a native way for developers to embed videos in HTML documents.

Before the <video> tag is available, you need to use the flash media player or other third-party websites to embed videos in HTML documents.

The <video> tag supports three video formats:

• MP4
• WebM
• ogg

When using the <video> tag in your HTML document, it’s recommended to have more than one video format so that the browser can choose the first format that it supports.

Here’s an example of using the <video> tag:

<video width="1280" height="720" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
  <p>
    Your browser does not support the video tag. Download the video
    <a href="video.mp4">here</a>
  </p>

  <p></p>
</video>

The output of the markup above will be as follows:

The demo uses the free Big Buck Bunny clip

When none of the video sources is supported by the browser, then the <p> tag above will be displayed.

You can add a link to the video directly inside the <p> tag to allow visitors to access your video directly and download it.

The following boolean attributes help you to control the presentation of the <video> tag:

• controls - display the controls for the video, such as the play/pause button, the video progress bar, and the volume bar
• autoplay - automatically play the video once it has been loaded to the browser
• loop - play the video again after it has been finished
• mute - initially mute the video
• autopictureinpicture - put the video in picture-in-picture mode when the user switches to another document or tab
• disableictureinpicture - disable the browser from putting the video in picture-in-picture mode automatically

Boolean attributes are active without needing any value assigned to it.

The <video> tag also supports regular attributes:

• width and height attributes for specifying the video dimension in pixels
• poster - add an image as the thumbnail of the video until the video is loaded on the browser
• src - specify the video source, but it’s recommended to use the <source> tag so that you can specify multiple formats and a fallback