HTML Video

In this tutorial we will learn about the video tag to work with video files in HTML.

What are video tags in HTML?

The video tag is a HTML5 element and it is used to embed video in the web page.

Example

In the following example we are creating a video element.

<video width="200" controls src="path/to/video-file.mp4">
  Your browser does not support the HTML video tag.
</video>

Another way we can do this is by using the source tag and including multiple files.

<video width="200" controls>
  <source src="path/to/video-file.mp4" type="video/mp4">
  <source src="path/to/video-file.ogg" type="video/ogg">
  <source src="path/to/video-file.webm" type="video/webm">
  Your browser does not support the HTML video tag.
</video>

Note! In the above example the text Your browser does not support the HTML video tag. will be displayed if the browser does not supports video tag.

Supported video format

Following are the supported video format.

File	Extension	MIME Type
MP4	.mp4	video/mp4
OGG	.ogg	video/ogg
WebM	.webm	video/webm

You can use the Find Fileinfo of this website to find the MIME type of the video files.

The `source` tag

We can also use the source tag to include one or more video files.

For this we set the src attribute to the video file URL and type attribute to the MIME type of the video file.

In the following exmaple we are using 3 different file types.

<source src="/video/video-file.mp4" type="video/mp4">
<source src="/video/video-file.ogg" type="video/ogg">
<source src="/video/video-file.webm" type="video/webm">

If we are using the source element then we can skip the src attribute in the opening video tag.

Attributes for the `video` tag

Following are the attributes that we can add to the video tag.

Attribute	Value	Description
controls	controls	If present will allow the user to control the video playback by providing seek, volume and pause/resume controls.
preload	none auto metadata	This tells the browser about what the author thinks will provide a better user experience. It is an enumerated attribute and can take the following values. `none` - Indicating not to preload the video. `auto` - Download the whole video file even if the user is not going to use it. `metadata` - Fetch only the metadata of the video like length.
autoplay	autoplay	If present will start playing the video as soon as it can do so.
loop	loop	If present will start playing the video all over again.
muted	muted	If specified will mute the video.
src	url	This specifies the `url` of the video file.
width	integer value	This defines the width of the display area.
height	integer value	This defines the height of the display area.
poster	url	If specified will show the poster for the video until the user plays the video.

What are video tags in HTML?

Example

Supported video format

The source tag

Attributes for the video tag

Recently Updated

The `source` tag

Attributes for the `video` tag