Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <video> tag.

Use of <video> tag

The <video> tag is used to embed video media play-back which contain audio files also associated with the video.

Display:Block

Example of <video> tag

<video>
----------------------
</video>

Three video file formats( .mp4, .webM, .ogg)

Upto now, three video file formats( .mp4, .webM, .ogg) are supported in HTML5

File Format
.mp4 Yes Yes 21.0 or higher Yes 25.0 or higher
.webM No Yes Yes No Yes
.ogg No Yes Yes No Yes

MIME Types for Video Formats

Video File Format MIME-type
.mp4 video/mpeg
.webM video/webm
.ogg video/ogg

Supported Browsers.

Tag
<video> 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="300" height="200" controls>
<source src="army.mp4" type="video/mp4">
Your browsers does not support this video format.
</video>
</body>
</html>

Output

The control attribute includes Pause, Play button and Volume Stabilizer.

Attributes of <video> tag

Tag Value Notes
autoplay autoplay If it is specified to the <video> element,the video will play automatically as soon as the page is loaded.
controls controls If it present,the video element will show Pause, Play button and Volume Stabilizer.
height pixels It specifies the height of the video player.
loop loop It defines the video playback should repeat automatically and infinitely.
muted muted If present, the video playback should not produce any sound like at 0 Volume.
poster URL It is used to display the picture of the downloaded video and it also uses in showing poster frame until the user plays or seeks the video.
preload auto
metadata
none
It defines is used to define the behaviour of the video with the loading of the page.
src URL It is used to specify the URL of the video file.
width pixels It specifies the width of the video player.

1. autoplay attribute

Explaination:The autoplay attribute is a boolean attribute.If it is specified to the <video> element,the video will play automatically as soon as the page is loaded.
At least, don't try to use the autoplay attribute because the visitors on your pages may retract from your site since autoplay is an annoy things.
In XHTML, the autoplay attribute is defined as:
<video autoplay = "autoplay">

Syntax:

<video autoplay>

Example:

<video autoplay controls>
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
autoplay 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

2. controls attribute

Explaination:The controls attribute is a boolean attribute.If it present,the video element will show Pause, Play button and Volume Stabilizer.
Be sure to add this attribute for any video you have embedded on you web-pages to allow the users operating the video files.
In XHTML, the loop attribute is defined as:
<video controls="controls">

Syntax:

<video controls>

Example:

<video controls>
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
controls 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

3. height attribute

Explaination: The height attribute specifies the height of the video player.
Always use this attribute with the width attribute.

Syntax:

<video height="pixels">

Example:

<video height="100px">
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
height Yes Yes Yes Yes Yes

4. loop attribute

Explaination: The loop attribute defines the video playback should repeat automatically and infinitely.

In XHTML, the loop attribute is defined as:
<video loop="loop">

Syntax:

<video loop>

Example:

<video loop>
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
loop 4.0 or higher 9.0 or higher 11.0 or higher 4.0 or higher 10.5 or higher

5. muted attribute

Explaination: The muted attribute is a boolean attribute.If present, the video playback should not produce any sound like at 0 Volume..
By default, the volume of the <muted> attribute is 0(zero).
In XHTML, the muted attribute is defined as:
<video muted="muted">

Syntax:

<video muted>

Example:

<video muted>
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</muted>

Supported Browsers

Attribute
muted 4.0 or higher 10.0 or higher 11.0 or higher 7.0 or higher 10.5 or higher

6. poster attribute

Explaination: The poster attribute is used to display the picture of the downloaded video and it also uses in showing poster frame until the user plays or seeks the video.
If it is not specified, the first frame of the video will be used instead.

Syntax:

<video poster="URL">

Example:

<video poster="/images/logo.png">
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
poster 4.0 or higher 9.0 or higher 3.6 or higher 4.0 or higher 10.5 or higher

7. preload attribute

Explaination: The preload attribute defines is used to define the behaviour of the video with the loading of the page.
Don't use this attribute if "autoplay" attribute is used. Three possible values are
1. auto: It defines that the video should not be preloaded.
2. metadata: It defines that the only video metadata (e.g. length) is fetched.
3. none: It defines that the entire video should not be preloaded.

Syntax:

<video preload="auto | metadata | none">

Example:

<video preload="none">
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
preload 4.0 or higher Not Supported 4.0 or higher 4.0 or higher 10.5 or higher

8. src attribute

Explaination: The src attribute is used to specify the URL of the video file.
If you apply src attribute to the <video> tag, you can apply only one video format either may be .mp4 or .webM or .ogg.
Suppose if you apply like <video src="army.ogg">.
But the .ogg file format is not supported in Safari and hence could not play the video in Safari browser. So it is better to use the src attribute inside the <source> element so that the browsers could choose automatically the supported video file format.

Syntax:

<video src="URL">

Example:

<video src="/video/demo.mp4">
</video>

Supported Browsers

Attribute
src 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

9. width attribute

Explaination: The width attribute specifies the width of the video player.
Always use this attribute with the height attribute.

Syntax:

<video width="pixels">

Example:

<video width="100px">
<source src="army.mp4" type="video/mp4">
<source src="army.ogg" type="video/ogg">
Your Browsers does not support this video format.
</video>

Supported Browsers

Attribute
width Yes Yes Yes Yes Yes