HTML Video

The HTML <video> tag is used to embed video into your web page, it has several video sources.

The <video> tag is responsible for embed or playing video in our html web page. We link video URL in <source/> tag’s src attribute and define it’s type attribute as type of video file like video/mp4. Let’s see it syntax and example.

HTML Video - Methods, Properties, and Events

• HTML5 defines DOM methods, properties, and events for the video element.
• This allows you to load, play, and pause videos, as well as setting duration and volume.
• There are also DOM events that can notify you when a video begins to play, is paused, etc.

Video tag syntax

<video width="width_value" height="height_value" controls>
   <source src="video_file_url" type="video_type" />
</video>

Video tag example

<video width="322" height="244" controls>
   <source src="../file/beautiful fly.mp4" type="video/mp4" />
</video>

Output

Playing Video in HTML

• Before HTML5, a video could only be played in a browser with a plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed a video in a web page.

Browser Support <video>

The number of browsers fully supports the <video> element

HTML video - Browser Support

Now days the maximum numbers of browser’s modern version supports <video> but it may possible some of them can’t. In below table we will list the major used browsers and their <video> tag support capability.

In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

HTML Video - Media Types

Basically there are 3 video media type listed in below table. We have to pass one of them as type attribute value, see below pairs of values:

Important <video> tag attribute

There are many attribute which are very important to know for efficient use of <video> tag. Here we will talk about all of them and provide syntax to know how to use them.

• Controls Attribute
• Autopaly Attribute
• Height and width attributes
• Loop Attribute
• Muted Attribute
• Poster Attribute
• preload Attribute

Controls Attribute

This attribute is responsible for displaying video in web page, so never forget to define controls attribute in <video> tag.

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

Autopaly Attribute

Autopaly attribute is used when we want to play any video automatically when page load completed.

<video controls autoplay >
   <source src="../../hfgfge.mp4" type="video_type" />
</video>

Height and width attributes

If we want to set particular height and width for a video tag then we can define height and width attribute and assign them by a value. Here no need to write any unit of length, it will be in px by default.

<video width="322" height="244" controls>
   <source src="../video/bdjf.mp4" type="video_type" />
</video>

Note: We can also define height and width attribute using style, here we can define value in any unit or in %, In such web-pages where we don’t know our targeted device type, means it can be large screen or small screen then in such case we recommends you to use % value, it will automatically turned your video as responsive. Try to use only width in %, height will be automatically adjust behalf of width value.

<video style="width:100%" controls>
   <source src="../../bdjfbsjjf.mp4" type="video_type" />
</video>

Loop Attribute

By default when video completes playing then it stop, if we want to replay it again and again then we needs to press replay button again and again. To solve this problem with the loop attribute. When we are using loop attribute then the video will be replay automatically after complete.

<video loop controls >
   <source src="../v/bdjbhf.mp4" type="video_type" />
</video>

Muted Attribute

The muted attribute is used when we don’t want sound any more. We can define video as muted from base.

<video muted controls >
   <source src="../file/jffhf.mp4" type="video_type" />
</video>

Poster Attribute

Poster attribute is used for displaying a picture while web page is being downloaded from web-server to web browser.

<video poster="poster_url_here" controls >
   <source src="file/lgvdsss.mp4" type="video_type" />
</video>

Preload Attribute

By defining this attribute we can increase user experience because with this attribute we can provide a hint to web browser at the time of page load, which video load is important first, so in this way we can increase user experience, possible value for this attribute are metadata, auto, none.

<video preload="none" controls >
   <source src="file/v1.mp4" type="video_type" />
</video>