Home HTML HTML video Tag with Example

HTML video Tag with Example

12
0

HTML <video> tag represents a multimedia objects like video clip or movie clip.

The video tag is generally used to embed a music video on your web page for your visitors to listen to and watch.

When any web browsers doesn’t support the video tag, we need to specify “alternate or fallback content” that will indicate visitors that this video is not supported by your web browser try with another one.

Also see HTML <audio> tag to specify audio objects like mp3 on your web page.

Note: HTML <video> tag is newly introduced in HTML5. The <video> tag is supported by all major web browsers.

Sample Code

<video src="video_sample.ogv" width="100%" height="250" controls>
    <p>Sorry, your web browser doesn't support this tag or video.</p>
</video>

Sample Result

Tip: You can see the complete List of HTML Elements here.

Tag Specific Attributes Support

The HTML <video> tag accepts attributes that specify how the video should be played. See below for a list of common supported tag specific attributes.

Attribute Value Description
autoplay autoplay Represents that the video will start playing on page load as soon as it is ready to play
controls controls Represents the video controls to displayed for the video player or not
height pixel
%
Represents the height of the video player
width pixel
%
Represents the width of the video player
loop loop Represents the loop for the that means video will re-play when it is reach at the end or completed
muted muted Represents the video is muted(sound off)
preload none
auto
metadata
Represents the preloaded video that meand loaded on page load
src url Represents the source location to embed the video

Standard Attributes Support

The HTML <video> tag supports HTML Standard Attributes. See below for a list of common supported standard attributes.

Attribute Value Description
class user_defined Represents a style for an element which is used in CSS style sheet
id user_defined Represents unique id for an element
style css_properties Represents an inline style for an element for e.g style=”color:red;text-decoration:underline;”
title user_defined Represents a tooltip information for an elements like img, a, abbr etc

 

Tip: You can see the complete List of HTML Attributes here.

Event Attributes Support

The “script” is invoked when a certain “event” occurs. Each event handler content attribute deals with different events. HTML <video> tag supports HTML Event Attributes. See below for a list of common supported event attributes.

Attribute Value Description
onclick script Event Fires immediately when mouse click on the specified element
ondblclick script Event Fires immediately when mouse double-click on the specified element
onkeydown script Event Fires immediately when user is pressing a down key from keyboard
onkeypress script Event Fires immediately when user presses a key from keyboard
onkeyup script Event Fires immediately when user releases a key from keyboard
onmousedown script Event Fires immediately when mouse pointer gets down from an element
onmousemove script Event Fires immediately when mouse pointer moves over an element
onmouseout script Event Fires immediately when mouse pointer gets out from an element
onmouseover script Event Fires immediately when mouse pointer moves over an element
onmouseup script Event Fires immediately when a mouse pointer is released over an element

 

Tip: You can see the complete List of HTML Event Attributes here.
Previous articleHTML wbr Tag with Example
Next articleWhat is CSS / CSS3?
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

9 − 2 =